/* Gerado por trend_css_bundle() — não editar. Edite os arquivos em trend_css_sources(). */

/* ==== assets/css/tokens/fonts.css ==== */
/* ============================================================
   FONTS — self-hosted (Brand Manual typography)
   ------------------------------------------------------------
   Same three faces as the Design System, but served from the
   theme instead of Google Fonts: production is Bluehost/cPanel
   and an external font CDN is one more thing that can fail or
   leak visitor IPs.

     • Bebas Neue    → impact numbers & display. The Manual asks for
                       BEBAS KAI (Adobe Fonts, licensed). Bebas Neue is
                       the OFL stand-in. When the Kai licence exists,
                       self-host it and prepend it to --font-display.
     • Archivo 800/900 → hero chamada only (variable file: one woff2
                       covers the whole 800–900 range).
     • Hind Siliguri → the workhorse: titles, body, labels (300–700).

   Only the latin + latin-ext subsets are shipped — the site serves
   an English-speaking market (Port St. Lucie, FL).
   ============================================================ */

/* ---- Archivo (hero chamada) ---- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 800 900;
  font-display: swap;
  src: url("https://trenddigitalmarketing.com/wp-content/themes/trend/assets/css/tokens/../../fonts/archivo-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 800 900;
  font-display: swap;
  src: url("https://trenddigitalmarketing.com/wp-content/themes/trend/assets/css/tokens/../../fonts/archivo-800-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Bebas Neue (impact numbers) ---- */
@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://trenddigitalmarketing.com/wp-content/themes/trend/assets/css/tokens/../../fonts/bebasneue-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://trenddigitalmarketing.com/wp-content/themes/trend/assets/css/tokens/../../fonts/bebasneue-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Hind Siliguri 300 / 400 / 500 / 600 / 700 (the workhorse) ---- */
@font-face {
  font-family: "Hind Siliguri";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("https://trenddigitalmarketing.com/wp-content/themes/trend/assets/css/tokens/../../fonts/hindsiliguri-300-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hind Siliguri";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("https://trenddigitalmarketing.com/wp-content/themes/trend/assets/css/tokens/../../fonts/hindsiliguri-300-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Hind Siliguri";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://trenddigitalmarketing.com/wp-content/themes/trend/assets/css/tokens/../../fonts/hindsiliguri-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hind Siliguri";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://trenddigitalmarketing.com/wp-content/themes/trend/assets/css/tokens/../../fonts/hindsiliguri-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Hind Siliguri";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://trenddigitalmarketing.com/wp-content/themes/trend/assets/css/tokens/../../fonts/hindsiliguri-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hind Siliguri";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://trenddigitalmarketing.com/wp-content/themes/trend/assets/css/tokens/../../fonts/hindsiliguri-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Hind Siliguri";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://trenddigitalmarketing.com/wp-content/themes/trend/assets/css/tokens/../../fonts/hindsiliguri-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hind Siliguri";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://trenddigitalmarketing.com/wp-content/themes/trend/assets/css/tokens/../../fonts/hindsiliguri-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Hind Siliguri";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://trenddigitalmarketing.com/wp-content/themes/trend/assets/css/tokens/../../fonts/hindsiliguri-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hind Siliguri";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://trenddigitalmarketing.com/wp-content/themes/trend/assets/css/tokens/../../fonts/hindsiliguri-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==== assets/css/tokens/colors.css ==== */
/* ============================================================
   COLORS — Trend Digital Marketing
   ------------------------------------------------------------
   OFFICIAL PALETTE — aligned to the Brand Manual (Manual da Marca
   2026, "fonte da verdade"). Purple is the protagonist (≥40% of a
   piece); turquoise is the intentional accent ("olho do leitor",
   never decorative); deep blue is sober support; red is semantic
   alert only. Proportion of use ≈ purple 50 · neutrals 30 ·
   turquoise 12 · blue rest.

   Official anchors: Purple #62279B · Turquoise #16B9C1 ·
   Deep Blue #284699 · Warning Red #C64B4B · Off-white #F7F5F1 ·
   Ink #0E0E0E · Soft Gray #6B6878 · Rule Gray #E5E2DC.
   Ramps are extended around those anchors for UI states.
   ============================================================ */
:root {
  /* ---- Purple ramp (primary / "Roxo") — 500 is the official brand purple ---- */
  --purple-50:  #F2ECF8;
  --purple-100: #E2D3F0;
  --purple-200: #C6A9E0;
  --purple-300: #A87ECF;
  --purple-400: #8452B9;
  --purple-500: #62279B;   /* OFFICIAL Trend Purple */
  --purple-600: #531F83;
  --purple-700: #421A67;
  --purple-800: #31164B;
  --purple-900: #211033;   /* deep purple ink — dark brand surface */
  --purple-950: #150A21;

  /* ---- Turquoise ramp (accent / "Turquesa") — 500 is the official accent ---- */
  --teal-50:  #E3F8F9;
  --teal-100: #BFF0F2;
  --teal-200: #8AE5E9;
  --teal-300: #4FD6DB;
  --teal-400: #23C7CD;   /* bright accent pop */
  --teal-500: #16B9C1;   /* OFFICIAL Trend Turquoise */
  --teal-600: #10949A;
  --teal-700: #0D7276;
  --teal-800: #0B5457;
  --teal-900: #093E40;

  /* ---- Deep Blue (sober support / infographics) ---- */
  --blue-400: #3A5BB5;
  --blue-500: #284699;   /* OFFICIAL Deep Blue */
  --blue-600: #1F3A80;

  /* ---- Neutrals (Manual: off-white, ink, soft gray, rule gray) ---- */
  --white:       #FFFFFF;
  --neutral-50:  #F7F5F1;   /* Off-white — dominant alt background */
  --neutral-100: #EFEDE7;
  --neutral-200: #E5E2DC;   /* Rule Gray — lines / borders */
  --neutral-300: #D3CFC8;
  --neutral-400: #A7A3AC;
  --neutral-500: #6B6878;   /* Soft Gray — secondary text */
  --neutral-600: #4D4A57;
  --neutral-700: #343139;
  --neutral-800: #201E24;
  --neutral-900: #0E0E0E;   /* Ink — text / dark theme */
  --black:       #0E0E0E;

  /* Back-compat alias — the old "cream" surface now maps to the Manual off-white */
  --cream: #F7F5F1;

  /* ---- Semantic status ---- */
  --success: #1FA971;
  --success-soft: #E3F6EE;
  --warning: #E0A116;
  --warning-soft: #FBF1D8;
  --danger:  #C64B4B;      /* OFFICIAL Warning Red — alerts / errors only, rare */
  --danger-soft:  #F6E5E4;
  --info:    var(--teal-500);
  --info-soft: var(--teal-50);

  /* ============================================================
     SEMANTIC ALIASES — reference these in components, not the ramp
     ============================================================ */
  /* Brand */
  --brand-primary:      var(--purple-500);
  --brand-primary-deep: var(--purple-700);
  --brand-ink:          var(--purple-900);
  --brand-accent:       var(--teal-500);
  --brand-accent-bright:var(--teal-400);
  --brand-blue:         var(--blue-500);

  /* Text */
  --text-strong:  var(--neutral-900);
  --text-body:    var(--neutral-700);
  --text-muted:   var(--neutral-500);
  --text-faint:   var(--neutral-400);
  --text-on-dark: var(--white);
  --text-on-dark-muted: rgba(255,255,255,0.66);
  --text-on-brand:var(--white);
  --text-link:    var(--purple-600);

  /* Surfaces */
  --surface-page:    var(--neutral-50);
  --surface-card:    var(--white);
  --surface-sunken:  var(--neutral-100);
  --surface-dark:    var(--purple-900);
  --surface-darker:  var(--purple-950);
  --surface-ink:     var(--neutral-900);   /* Manual "Dark" theme surface */
  --surface-cream:   var(--neutral-50);
  --surface-accent-soft: var(--purple-50);

  /* Borders */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-on-dark: rgba(255,255,255,0.14);
  --border-brand:   var(--purple-500);

  /* Focus ring */
  --focus-ring: var(--teal-400);
}

/* ==== assets/css/tokens/typography.css ==== */
/* ============================================================
   TYPOGRAPHY — Trend Digital Marketing (Brand Manual)
   Impact  = Bebas Kai / Bebas Neue  (hero chamadas + big numbers)
   Titles/Body/Labels = Hind Siliguri (the workhorse voice)
   ------------------------------------------------------------
   --font-display is the IMPACT face (Bebas). Section titles, body
   and labels use --font-sans (Hind). Bebas is single-weight, so
   font-weight has no effect on it — reserve it for the big moments.
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-display: "Bebas Kai", "Bebas Neue", "Oswald", "Arial Narrow", sans-serif; /* impact numbers */
  --font-hero:    "Archivo", "Hind Siliguri", system-ui, sans-serif; /* hero chamada — heavy wide grotesque (New-Engen energy; overrides Manual's Bebas for the hero only) */
  --font-sans:    "Hind Siliguri", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Hind Siliguri", system-ui, -apple-system, sans-serif; /* labels/eyebrows — Hind caps */

  /* ---- Weights (Hind Siliguri: 300–700; Bebas: 400 only) ---- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:700; /* Hind caps at 700 — kept as alias */
  --weight-black:    700;

  /* ---- Type scale (clamped, fluid) — Manual hierarchy ---- */
  --text-display-xl: clamp(4rem, 9vw, 9rem);      /* Bebas hero / chamada (140–260px feel) */
  --text-display-l:  clamp(3rem, 6vw, 6rem);
  --text-display-m:  clamp(2.5rem, 4.4vw, 4rem);
  --text-h1: 2.75rem;   /* Hind 700 title */
  --text-h2: 2rem;      /* 32 */
  --text-h3: 1.5rem;    /* 24 */
  --text-h4: 1.25rem;   /* 20 */
  --text-lg:   1.125rem;/* 18 */
  --text-base: 1rem;    /* 16 */
  --text-sm:   0.875rem;/* 14 */
  --text-xs:   0.75rem; /* 12 */
  --text-eyebrow: 0.8125rem; /* 13 — Hind uppercase label */

  /* ---- Line heights ---- */
  --leading-tight:   1.0;   /* Bebas display */
  --leading-snug:    1.15;  /* Hind titles */
  --leading-normal:  1.4;   /* Manual body leading */
  --leading-relaxed: 1.7;

  /* ---- Letter spacing ---- */
  --tracking-display: 0.01em;   /* Manual: Bebas hero +0.01em */
  --tracking-tight:   -0.01em;  /* Manual: Hind title -0.01em */
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.16em;   /* Manual: meta/label Hind 600 caps +0.16em */
}

/* ---- Helper classes (components mostly use vars) ---- */
.t-display-xl { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-display-xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
.t-display-l  { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-display-l);  line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
.t-h1 { font-family: var(--font-sans); font-weight: var(--weight-bold); font-size: var(--text-h1); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
.t-h2 { font-family: var(--font-sans); font-weight: var(--weight-bold); font-size: var(--text-h2); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
.t-h3 { font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: var(--text-h3); line-height: var(--leading-snug); }
.t-body { font-family: var(--font-sans); font-weight: var(--weight-regular); font-size: var(--text-base); line-height: var(--leading-normal); }
.t-eyebrow { font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }

/* ==== assets/css/tokens/spacing.css ==== */
/* ============================================================
   SPACING & LAYOUT — Trend Digital Marketing
   4px base grid.
   ============================================================ */
:root {
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  2.5rem;   /* 40 */
  --space-8:  3rem;     /* 48 */
  --space-9:  4rem;     /* 64 */
  --space-10: 5rem;     /* 80 */
  --space-12: 7rem;     /* 112 */
  --space-16: 10rem;    /* 160 */

  /* Section rhythm — 1440px is the standard desktop design width.
     Used by every section AND the nav/header, so the whole site aligns. */
  --section-pad-y: clamp(4rem, 8vw, 8rem);
  --container-max: 1440px;
  --container-pad: clamp(1.25rem, 3vw, 3rem);
  --content-max:   72ch;
}

/* ==== assets/css/tokens/effects.css ==== */
/* ============================================================
   EFFECTS — radii, shadows, motion, blur
   ------------------------------------------------------------
   Card language: generously rounded corners, soft low-contrast
   shadows on light surfaces, subtle hairline borders. Bright
   accent (turquoise) rings on focus. Calm, springy motion.
   ============================================================ */
:root {
  /* ---- Radii ---- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   26px;
  --radius-2xl:  36px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);

  /* ---- Shadows (soft, cool-tinted) ---- */
  --shadow-xs: 0 1px 2px rgba(33, 16, 70, 0.06);
  --shadow-sm: 0 2px 6px rgba(33, 16, 70, 0.07);
  --shadow-md: 0 8px 24px rgba(33, 16, 70, 0.09);
  --shadow-lg: 0 18px 48px rgba(33, 16, 70, 0.12);
  --shadow-xl: 0 30px 70px rgba(33, 16, 70, 0.16);
  /* Brand-tinted glow for hero CTAs / accent cards */
  --shadow-brand: 0 14px 36px rgba(108, 43, 217, 0.28);
  --shadow-accent: 0 14px 36px rgba(17, 173, 165, 0.26);

  /* ---- Blur / glass ---- */
  --blur-sm: blur(8px);   /* @kind other */
  --blur-md: blur(18px);  /* @kind other */
  --glass-light: rgba(255, 255, 255, 0.72);
  --glass-dark:  rgba(21, 10, 46, 0.55);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);/* @kind other */
  --dur-fast:   0.14s;  /* @kind other */
  --dur-base:   0.24s;  /* @kind other */
  --dur-slow:   0.45s;  /* @kind other */

  /* ---- Focus ---- */
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
}

/* ==== style.css ==== */
/*
Theme Name: Trend
Theme URI: https://trenddigitalmarketing.com/
Author: Trend Digital Marketing
Author URI: https://trenddigitalmarketing.com/
Description: Tema próprio da Trend Digital Marketing. Implementa o Design System oficial (Manual da Marca 2026) — Bebas Neue / Archivo / Hind Siliguri, paleta roxo · turquesa · azul, grade de 4px. Layout da Home portado do UI kit do Design System.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: trend
Tags: custom-theme, one-column, full-width-template
*/

/* ============================================================
   BASE — reset + element defaults
   ------------------------------------------------------------
   Os valores de marca NUNCA aparecem aqui em hexadecimal: tudo
   vem dos tokens em assets/css/tokens/, cópia fiel do Design
   System. Ver a página "Design System" no admin.
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--brand-ink);
  text-wrap: balance;
}

p { margin: 0; }

a {
  color: var(--text-link);
  -webkit-tap-highlight-color: transparent;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font: inherit;
  color: inherit;
}

/* Foco visível — anel turquesa do Design System, em todo elemento focável.
   :focus-visible só aparece para teclado, então o mouse não vê o anel. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-xs);
}

/* Pular para o conteúdo — visível só quando focado pelo teclado */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 20px;
  background: var(--brand-primary);
  color: var(--white);
  font-weight: var(--weight-bold);
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  left: 0;
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute !important;
  white-space: nowrap;
  word-wrap: normal;
}

/* ==== assets/css/theme.css ==== */
/* ============================================================
   TREND — theme.css
   Layout da Home portado do UI kit do Design System
   (ui_kits/website/Home.jsx + Nav.jsx + Footer.jsx).
   ------------------------------------------------------------
   Regra desta folha: nenhum valor de marca hard-coded. Cor, fonte,
   tamanho, espaçamento, raio, sombra e curva de easing saem dos
   tokens. As poucas exceções são as superfícies específicas do
   layout (abaixo), que existem no UI kit e não no token set.
   ============================================================ */

:root {
  /* Superfícies do layout — vêm do UI kit, não do token set.
     Roxo quase preto do hero/serviços/depoimentos; o rodapé é um
     grau mais frio; a barra do nav ganha transparência ao rolar. */
  --site-dark: #140A21;
  --site-footer: #120A1C;
  --site-nav-scrolled: rgba(21, 10, 33, 0.82);
  --on-dark-strong: rgba(255, 255, 255, 0.88);
  --on-dark-body: rgba(255, 255, 255, 0.78);

  /* Padrão de títulos (13/09/2026) — Rótulo · Frase · Apoio, três tamanhos.
     Escala linear de 390 a 1440px, teto perto de 2560. O hero da Home
     (Archivo) fica de fora, por decisão. Esboço: TrendDesign/esbocos/.
     REDUZIDA em 26/09/2026, a pedido: "tudo muito grande e quebrando em
     muitas linhas". Cada degrau desceu ~um passo (a Chamada ficou com o
     tamanho que era da Declaração) e a Chamada passou a ficar abaixo do
     hero da Home, que é o espetáculo do site. */
  --title-call:      clamp(2.75rem,   1.914rem + 3.429vw, 7.5rem);  /*  44 →  80 → 120 · Bebas, h1 e chamada final */
  --title-statement: clamp(2.125rem,  1.707rem + 1.714vw, 4.5rem);  /*  34 →  52 →  72 · Hind 700, uma ou duas por página */
  --title-section:   clamp(1.75rem,   1.471rem + 1.143vw, 3.25rem); /*  28 →  40 →  52 · Hind 700, o resto */
  --title-lead:      clamp(1rem,      0.954rem + 0.19vw,  1.25rem); /*  16 →  18 →  20 · Hind 500, o apoio ao lado de um título de Seção */
  --title-lead-l:    clamp(1.125rem,  1.055rem + 0.286vw, 1.5rem);  /*  18 →  21 →  24 · Hind 500, o apoio sob uma Chamada ou Declaração, e o corpo grande */

  /* Ritmo vertical do site (26/09/2026): ~25% mais curto que o
     `--section-pad-y` do Design System (64 → 115px), que continua lá,
     intocado — o token é cópia byte a byte e o UI kit dele usa. */
  --section-y: clamp(3rem, 6vw, 6rem);                                /*  48 →  86 →  96 */
  --on-dark-muted: rgba(255, 255, 255, 0.6);
  --on-dark-faint: rgba(255, 255, 255, 0.42);
  --on-dark-rule: rgba(255, 255, 255, 0.16);

  /* Acessibilidade (TRED-141, 12/10/2026) — dois tokens do Design System
     sobrescritos AQUI, com a medida que obrigou:
     - Anel de foco: o `--teal-400` do token set dava ~2:1 sobre o creme e o
       branco, e a WCAG 1.4.11 pede 3:1 do indicador contra o fundo. O
       `--teal-600` dá 3,1–3,7:1 no claro e 4,8–5,2:1 na tinta. A moldura
       escura (header, hero, rodapé) volta ao turquesa vivo; roxo e azul
       pedem branco (ver "Foco por fundo", logo abaixo). Regra de foco nova
       usa `var(--focus-ring)`, nunca a cor direto: é ela que muda por fundo.
     - Texto de erro: o `--danger` sobre o off-white dava 4,28:1 (o piso é
       4,5). Ele com 15% de tinta dá 5,4:1 e continua o vermelho do Manual. */
  --focus-ring: var(--teal-600);
  --text-danger: color-mix(in srgb, var(--danger) 85%, var(--neutral-900));
}

/* Foco por fundo: o anel é a variável, e cada chão escolhe a cor dela. */
.site-header,
.page-hero,
.hero-section,
.site-footer { --focus-ring: var(--brand-accent-bright); }
/* o anel dos cards do Selected Work encosta na sombra do card (~#E3E1E2):
   lá o `--teal-600` dava 2,8:1 e o `--teal-700` dá 4,4:1 */
.work-section { --focus-ring: var(--teal-700); }
/* turquesa direto sobre o roxo o Manual proíbe — e mede 2,5:1 */
.cta-band,
.v4-finale__card { --focus-ring: var(--white); }

/* O foco nunca para embaixo do header fixo (WCAG 2.4.11, técnica C43 da
   W3C): voltando com Shift+Tab, o navegador rolava o campo para a borda de
   cima da tela — atrás do header, até 100% coberto. Com o respiro, ele
   para logo abaixo da barra. Vale também para âncora (#marketing-director)
   e para o "Skip to content". Altura: a da barra (90px no desktop, até 79px
   no celular) mais folga. */
html { scroll-padding-top: 112px; }
@media (max-width: 1060px) { html { scroll-padding-top: 92px; } }

/* ============================================================
   1. LAYOUT
   ============================================================ */

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

.section-pad {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

/* A cortina: tudo depois do hero sobe POR CIMA dele (o hero é sticky). */
.site-curtain {
  position: relative;
  z-index: 2;
  box-shadow: 0 -28px 70px rgba(5, 2, 12, 0.45);
}

/* A primeira seção da cortina encosta no hero como uma folha. */
.section-sheet {
  border-radius: clamp(22px, 3vw, 36px) clamp(22px, 3vw, 36px) 0 0;
  margin-top: -44px;
  position: relative;
  z-index: 2;
  box-shadow: 0 -18px 60px rgba(11, 6, 20, 0.35);
}

/* ============================================================
   2. TIPOGRAFIA DE SEÇÃO
   ============================================================ */

/* Eyebrow "de agência": índice + régua + rótulo */
.sec-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.16em; /* Manual: rótulo Hind 600 caps +0.16em */
  text-transform: uppercase;
  color: var(--brand-primary);
}
.sec-eyebrow--on-dark { color: var(--brand-accent-bright); }
/* opacity 0.55 (valor do UI kit) derrubava o índice para 3,4:1 sobre o
   roxo escuro. 0.82 mantém a hierarquia — o índice segue mais discreto
   que o rótulo — e sobe para ~6,6:1. */
.sec-eyebrow__idx {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  opacity: 0.82;
}
.sec-eyebrow__rule {
  width: 28px;
  height: 1px;
  background: currentColor;
  display: inline-block;
  opacity: 0.5;
}

/* Eyebrow do Design System: tick turquesa + label */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-primary);
}
.eyebrow--on-dark { color: var(--brand-accent-bright); }
.eyebrow__tick {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--brand-accent);
  display: inline-block;
  flex-shrink: 0;
}

.section-title {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-h1);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--brand-ink);
  margin: var(--space-3) 0 0;
}
/* no padrão de títulos: a grade da Home é "Seção"; o time da About é a
   segunda "Declaração" da página (o modelo tem um título gigante ali) */
.work-section .section-title { font-size: var(--title-section); line-height: 1.05; }
.about-team .sec-head { max-width: 48rem; }   /* 62ch cabia 56px; a 80 o título quebrava em quatro linhas */
.about-team .section-title { font-size: var(--title-statement); line-height: 1.0; }

/* Trecho em gradiente dentro de um título. Fundo pintado no texto —
   o fallback (color) fica declarado antes, então navegador sem
   background-clip:text ainda mostra o texto legível em roxo. */
.grad-text {
  color: var(--brand-primary);
  background: linear-gradient(100deg, var(--purple-500), var(--teal-500));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.grad-text--on-dark {
  color: var(--brand-accent-bright);
  background: linear-gradient(100deg, var(--purple-400), var(--teal-400));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Rótulo só para leitor de tela — o padrão do WordPress, que o tema não
   declarava (só citava num comentário). Usado onde o campo tem
   placeholder mas precisa de nome. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   3. BOTÕES (componente Button do Design System)
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  /* Tamanho PADRÃO, igual ao `--md`. Antes altura e padding vinham só do
     modificador, e `class="btn btn--secondary"` — sem tamanho — saía com
     altura zero e padding zero: o texto encostava na borda e a pílula
     virava um risco. Passou despercebido no card de pricing porque o
     `width: 100%` disfarçava, e estava assim também na /thank-you/.
     Esquecer o modificador agora degrada para um botão correto. */
  height: 46px;
  padding: 0 var(--space-5);
  font-size: var(--text-base);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.btn:active { transform: translateY(1px) scale(0.99); }

.btn--sm { height: 38px; padding: 0 var(--space-4); font-size: var(--text-sm); }
.btn--md { height: 46px; padding: 0 var(--space-5); font-size: var(--text-base); }
.btn--lg { height: 56px; padding: 0 var(--space-6); font-size: var(--text-lg); }

.btn--primary {
  background: var(--brand-primary);
  color: var(--text-on-brand);
  box-shadow: var(--shadow-brand);
}
.btn--primary:hover { background: var(--purple-600); }

.btn--accent {
  background: var(--brand-accent);
  color: #04302E;
  box-shadow: var(--shadow-accent);
}
.btn--accent:hover { background: var(--brand-accent-bright); }

.btn--secondary {
  background: var(--white);
  color: var(--brand-ink);
  border-color: var(--border-default);
  box-shadow: var(--shadow-xs);
}
.btn--secondary:hover { border-color: var(--brand-primary); color: var(--brand-primary); }

.btn__arrow { flex-shrink: 0; transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ============================================================
   4. HEADER / NAV
   ============================================================ */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  pointer-events: none;
  padding: 20px 24px;
  transition: padding var(--dur-slow) var(--ease-out),
              transform 0.45s var(--ease-out);
}
.site-header.is-scrolled { padding: 14px 24px; }
/* Enquanto os Serviços estão pinados, o header sobe e sai — senão
   ele fica em cima da primeira linha de mídia. */
body.svc-pinned .site-header { transform: translateY(-140%); }
/* Mesma saída, agora ao rolar para baixo (ver site.js). Só no celular:
   104px fixos numa tela de 844 são 12% permanentemente ocupados, e as
   capturas mostravam o header cobrindo chamada, copy, depoimento e até
   um botão. Rolando para cima ele volta na hora — o CTA continua a um
   gesto de distância. */
.site-header.is-hidden { transform: translateY(-140%); }

.site-header__bar {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  pointer-events: auto;
  padding: 0 var(--container-pad);
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  transition: background var(--dur-slow) var(--ease-out),
              border-radius var(--dur-slow) var(--ease-out),
              padding var(--dur-slow) var(--ease-out),
              border-color var(--dur-slow),
              box-shadow var(--dur-slow);
}
/* — HERO CLARO: a pílula já sólida desde o topo —
   As páginas de hero claro (lista abaixo) nascem no estado `.is-scrolled`.
   A lista mora AQUI e só aqui. Até 15/09/2026 cada folha de página tinha a
   própria cópia destas três regras, e a do `.nav-links` — escrita para a
   pílula inline do desktop — atropelava o fundo do painel do hambúrguer no
   celular: no topo da About, da Pricing e das galerias o menu abria
   TRANSPARENTE (links brancos a 70% sobre creme). Daí o `:not(.is-open)`.
   Template novo de hero claro: acrescente às três listas, não copie. */
body.page-template-template-about .site-header,
body.page-template-template-contact .site-header,
body.page-template-template-services .site-header,
body.page-template-template-pricing .site-header,
body.page-template-template-showcase .site-header,
body.page-template-template-dealership .site-header,
body.page-template-template-solutions .site-header { padding: 14px 24px; }

.is-scrolled .site-header__bar,
body.page-template-template-about .site-header:not(.is-scrolled) .site-header__bar,
body.page-template-template-contact .site-header:not(.is-scrolled) .site-header__bar,
body.page-template-template-services .site-header:not(.is-scrolled) .site-header__bar,
body.page-template-template-pricing .site-header:not(.is-scrolled) .site-header__bar,
body.page-template-template-showcase .site-header:not(.is-scrolled) .site-header__bar,
body.page-template-template-dealership .site-header:not(.is-scrolled) .site-header__bar,
body.page-template-template-solutions .site-header:not(.is-scrolled) .site-header__bar {
  border-radius: var(--radius-pill);
  background: var(--site-nav-scrolled);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-color: rgba(98, 39, 155, 0.35);
  box-shadow: 0 8px 40px rgba(98, 39, 155, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  padding: 10px 10px 10px 20px;
  /* O CONTEÚDO da pílula (logo e "Let's talk") fica na margem do container,
     e a pílula, que é fundo, passa dela pelo próprio respiro — 20px à
     esquerda, 10 à direita (19/10/2026, TRED-148). Com o `max-width` do
     container a pílula ficava DENTRO dele e, acima de ~1490px de tela, o
     logo pulava 28px para fora ao virar pílula. `100%` é a largura do
     header menos os 24px de cada lado; até 1440 as margens valem 0. */
  max-width: none;
  margin-inline: max(0px, calc((100% - var(--container-max)) / 2 + var(--container-pad) - 20px))
                 max(0px, calc((100% - var(--container-max)) / 2 + var(--container-pad) - 10px));
}

.site-header__logo { display: flex; align-items: center; flex-shrink: 0; }
/* Logo maior sem a barra crescer (01/10/2026, a pedido): o arquivo oficial
   tem ~24% de margem transparente em cima e embaixo, e a margem negativa
   devolve só o que o logo ganhou — a marca visível cresce de ~28 para
   ~34px e a pílula continua com 76px. */
.site-header__logo img { height: 66px; width: auto; margin-block: -6px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 4px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-pill);
  transition: background var(--dur-slow);
}
.is-scrolled .nav-links,
body.page-template-template-about .site-header:not(.is-scrolled) .nav-links:not(.is-open),
body.page-template-template-contact .site-header:not(.is-scrolled) .nav-links:not(.is-open),
body.page-template-template-services .site-header:not(.is-scrolled) .nav-links:not(.is-open),
body.page-template-template-pricing .site-header:not(.is-scrolled) .nav-links:not(.is-open),
body.page-template-template-showcase .site-header:not(.is-scrolled) .nav-links:not(.is-open),
body.page-template-template-dealership .site-header:not(.is-scrolled) .nav-links:not(.is-open),
body.page-template-template-solutions .site-header:not(.is-scrolled) .nav-links:not(.is-open) { background: rgba(255, 255, 255, 0.06); }
.nav-links a {
  display: block;
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: background var(--dur-base), color var(--dur-base), box-shadow var(--dur-base);
}
.nav-links li { margin: 0; list-style: none; }
.nav-links a:hover { color: var(--white); }
/* O WordPress marca o item ativo com uma dessas classes, dependendo de
   ser página, post ou item do menu — todas precisam acender a pílula. */
.nav-links .current-menu-item > a,
.nav-links .current_page_item > a,
.nav-links .current-menu-ancestor > a,
.nav-links a[aria-current="page"] {
  color: var(--white);
  background: var(--brand-primary);
  box-shadow: 0 2px 12px rgba(98, 39, 155, 0.45);
}

/* — Submenu (só a família de Serviços, por ora) —

   Abre por :hover e por :focus-within, sem JavaScript. O pai continua
   sendo um link real para a própria página, então não existe item que
   só abre submenu; e como o CSS reage ao foco, o teclado percorre a
   família inteira sem uma parada de tab a mais para "abrir".

   O `.site-header__bar` NÃO pode ganhar overflow: o painel precisa
   escapar da pílula. Por isso o submenu é `position: absolute` a partir
   do `li`, e o `li` é o único `position: relative` da corrente. */
.nav-links > li { position: relative; }

.nav-chevron {
  margin-left: 5px;
  vertical-align: -2px;
  opacity: .6;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base);
}
.nav-links > li:hover > a .nav-chevron,
.nav-links > li:focus-within > a .nav-chevron { opacity: 1; transform: rotate(180deg); }

.nav-links .sub-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 232px;
  list-style: none;
  margin: 0;
  padding: 6px;
  background: var(--site-nav-scrolled);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(98, 39, 155, 0.35);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 48px rgba(5, 2, 12, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility var(--dur-base);
}
/* Sem `visibility` o leitor de tela anuncia os quatro itens do submenu
   em toda página, fechado ou não. */
.nav-links > li:hover > .sub-menu,
.nav-links > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Ponte sobre o vão de 12px entre a pílula e o painel: sem ela o mouse
   atravessa um buraco e o submenu fecha no meio do caminho. */
.nav-links .sub-menu::before {
  content: "";
  position: absolute;
  inset: -14px 0 100% 0;
}

.nav-links .sub-menu a {
  padding: 9px 14px;
  font-size: 13px;
  border-radius: var(--radius-md);
  color: rgba(255, 255, 255, 0.78);
}
.nav-links .sub-menu a:hover { background: rgba(255, 255, 255, 0.08); color: var(--white); }
.nav-links .sub-menu .current-menu-item > a,
.nav-links .sub-menu .current_page_item > a {
  background: var(--brand-primary);
  color: var(--white);
}

@media (prefers-reduced-motion: reduce) {
  .nav-links .sub-menu { transition: none; transform: translateX(-50%); }
  .nav-links > li:hover > .sub-menu,
  .nav-links > li:focus-within > .sub-menu { transform: translateX(-50%); }
  .nav-chevron { transition: none; }
}

.site-header__right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

/* Botão sanduíche — só aparece abaixo de 1060px */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-pill);
  cursor: pointer;
  color: var(--white);
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast);
}
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; }
.nav-toggle__bars::before { transform: translateY(-6px); }
.nav-toggle__bars::after { transform: translateY(6px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: rotate(-45deg); }

/* ============================================================
   5. HERO
   ============================================================ */

.hero-section {
  position: sticky;
  top: 0;
  z-index: 0;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--site-dark);
  color: var(--white);
}

.hero-glows { position: absolute; inset: 0; pointer-events: none; }
.hero-glows span { position: absolute; border-radius: 50%; display: block; }
.hero-glow-1 {
  top: -120px; left: -100px; width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(98, 39, 155, 0.45) 0%, transparent 70%);
}
.hero-glow-2 {
  bottom: -220px; right: -140px; width: 860px; height: 860px;
  background: radial-gradient(circle, rgba(22, 185, 193, 0.50) 0%, transparent 68%);
}
.hero-glow-3 {
  top: 30%; right: 20%; width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(90, 20, 60, 0.25) 0%, transparent 70%);
}
.hero-fade {
  position: absolute;
  inset: auto 0 0 0;
  height: 100px;
  background: linear-gradient(to top, var(--site-dark), transparent);
  pointer-events: none;
  z-index: 1;
}

.hero-grid {
  position: relative;
  z-index: 1;
  width: 100%;
  flex: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(0, 650px);
  align-items: center;
  gap: clamp(40px, 5vw, 80px);
  padding: clamp(104px, 13vh, 144px) var(--container-pad) clamp(40px, 6vh, 64px);
}

.hero-title {
  font-family: var(--font-hero);
  font-weight: 900;
  font-size: clamp(52px, 6.4vw, 120px);
  line-height: 0.9;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--surface-cream);
  margin: 0;
}
.hero-line { display: block; }

.hero-lede {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.65;
  color: var(--on-dark-muted);
  margin: 26px 0 0;
  max-width: 40ch;
}

.hero-cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 34px;
}
.hero-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--brand-accent-bright);
  color: var(--teal-900);
  box-shadow: 0 10px 30px rgba(35, 199, 205, 0.28);
  padding: 17px 34px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--weight-bold);
  transition: transform var(--dur-base), box-shadow var(--dur-base);
}
.hero-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(35, 199, 205, 0.4);
}
/* O secundário (Homepage Copy Brief, 19/10/2026): mesma altura do primário,
   só contorno — o turquesa é do "Book a Strategy Call" e de mais ninguém.
   A seta aponta para baixo porque o destino é a seção logo abaixo. */
.hero-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.34);
  color: var(--white);
  padding: 16px 30px;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--weight-bold);
  transition: border-color var(--dur-base), background-color var(--dur-base);
}
.hero-cta-secondary svg { flex: none; width: 16px; height: 16px; transition: translate var(--dur-base) var(--ease-out); }
.hero-cta-secondary:hover { border-color: rgba(255, 255, 255, 0.72); background-color: rgba(255, 255, 255, 0.06); }
.hero-cta-secondary:hover svg { translate: 0 2px; }
@media (prefers-reduced-motion: reduce) {
  .hero-cta-secondary:hover svg { translate: none; }
}
/* A linha de porte: o primeiro filtro da página, em texto menor que o apoio. */
.hero-fit {
  margin: 22px 0 0;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.5;
  color: var(--on-dark-muted);
  text-wrap: pretty;
}

.hero-stage-wrap { display: flex; min-width: 0; }
.hero-stage { position: relative; width: 100%; min-height: clamp(500px, 72vh, 700px); }
/* Âncoras invisíveis: definem onde os cards de Selected Work
   descansam (empilhados) enquanto o hero está no topo. */
.hero-slot {
  position: absolute;
  top: 44%;
  transform: translateY(-50%);
  width: 54%;
  aspect-ratio: 9 / 16;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes heroRise {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
  }
  .hero-rise { animation: heroRise 0.8s cubic-bezier(0.25, 0.8, 0.3, 1) both; }
  .hero-rise-2 { animation-delay: 0.15s; }
}

/* ============================================================
   6. SELECTED WORK
   ============================================================ */

.work-section { background: var(--surface-cream); }
.work-head { text-align: center; margin-bottom: var(--space-8); }
.work-head .section-title { margin-top: var(--space-3); }
/* "Trusted by" é o ÚNICO rótulo do site fora do caixa-alta (pedido de
   17/09/2026) — desvio consciente da regra do Manual que o `.sec-eyebrow`
   aplica. O `letter-spacing` sai junto e não por estética: 0.16em existe
   para separar CAPS; em minúsculas o mesmo valor vira palavra esgarçada.
   Escopado ao `.work-head`, que só existe nesta seção — os demais rótulos
   (Our clients, FAQ, Our process…) seguem o Manual. */
.work-head .sec-eyebrow { text-transform: none; letter-spacing: normal; }

/* `--cards` vem do work.php: uma coluna por card (5 desde 19/10/2026) */
.work-grid {
  display: grid;
  grid-template-columns: repeat(var(--cards, 4), 1fr);
  gap: var(--space-4);
}

/* Slot = alvo vazio de encaixe. O card real flutua por cima. */
.flip-slot {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-xl);
  background: rgba(14, 14, 14, 0.045);
  border: 1px solid var(--border-subtle);
}

.flip-card {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  /* costura clara na borda esquerda: duas fatias sobrepostas nunca
     se fundem visualmente, mesmo com fotos de tom parecido */
  box-shadow: var(--shadow-lg), inset 2px 0 0 rgba(255, 255, 255, 0.28);
  cursor: pointer;
  will-change: transform;
}
.flip-card__media,
.flip-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.flip-card__video { opacity: 0; transition: opacity 0.4s ease; }
/* `is-hovered` vem do home.js: o card sob o mouse toca o próprio clipe */
.flip-card.is-front .flip-card__video,
.flip-card.is-hovered .flip-card__video { opacity: 1; }
/* Escurecimento mais fundo e mais alto que o do UI kit. Os trailers têm
   legenda queimada no vídeo ("Sunomono", "Ceviche") e o número do card
   caía exatamente em cima delas — duas camadas de texto branco
   disputando o mesmo pedaço da imagem. */
.flip-card__scrim {
  position: absolute;
  inset: 0;
  /* um pouco mais alto e mais fundo desde que o segmento entrou acima do
     número (19/10/2026): o rótulo em caixa-alta mora a ~30% da base */
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.55) 38%,
    transparent 72%);
}
.flip-card__body { position: absolute; inset: auto 22px 22px 22px; }
/* O segmento do cliente (Homepage Copy Brief): rótulo do Manual, acima do número. */
.flip-card__tag {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--white);
}
.flip-card__size { font-weight: var(--weight-regular); color: rgba(255, 255, 255, 0.82); }
.flip-card__stat {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: 46px;
  line-height: 1;
  color: var(--white);
  letter-spacing: -0.02em;
}
.flip-card__label {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.78);
  margin: 4px 0 12px;
}
.flip-card__name {
  display: block;
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: 15px;
  color: var(--white);
}

.work-cta { text-align: center; margin-top: var(--space-7); }

/* ============================================================
   7. CLIENTS
   ============================================================ */

.clients-section {
  position: relative;
  background: var(--surface-cream);
  border-bottom: 1px solid var(--border-subtle);
  overflow: hidden;
}
.clients-head {
  text-align: center;
  padding: var(--space-9) var(--container-pad) var(--space-7);
  position: relative;
  z-index: 1;
}
.clients-head .sec-eyebrow { margin-bottom: var(--space-4); }
.clients-head h2 {
  font-size: var(--text-h1);
  margin: 0 auto;
  max-width: 28ch;
}
.clients-head p {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--text-muted);
  margin: var(--space-4) auto 0;
  max-width: 52ch;
}

.clients-marquee { position: relative; overflow: hidden; padding-bottom: var(--space-5); }
.clients-marquee::before,
.clients-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(48px, 9vw, 200px);
  z-index: 2;
  pointer-events: none;
}
.clients-marquee::before { left: 0; background: linear-gradient(to right, var(--surface-cream), transparent); }
.clients-marquee::after  { right: 0; background: linear-gradient(to left, var(--surface-cream), transparent); }

@keyframes clientsMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.clients-track {
  display: flex;
  width: max-content;
  animation: clientsMarquee 120s linear infinite;
}
/* Fora da tela, parada. Faixa animando onde ninguém vê é o custo mais
   caro e mais inútil da página no celular. */
.clients-marquee:not(.is-onscreen) .clients-track,
.pillars:not(.is-onscreen) .pillars-track { animation-play-state: paused; }
/* `will-change` só enquanto a faixa está em cena. A trilha tem milhares
   de pixels de largura: manter essa camada promovida o tempo todo é
   memória de GPU parada — exatamente o que `will-change` permanente
   costuma custar. */
.clients-marquee.is-onscreen .clients-track,
.pillars.is-onscreen .pillars-track { will-change: transform; }
.clients-row { display: flex; align-items: center; }
.clients-logo {
  flex: none;
  margin: 0 clamp(10px, 1.1vw, 18px);
  height: 88px;
  width: clamp(170px, 13vw, 210px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}
.clients-logo img { max-height: 56px; max-width: 100%; width: auto; height: auto; object-fit: contain; }

/* ---- Controle de movimento (WCAG 2.2.2) ----
   Um botão só para as duas faixas da página. Fica discreto: quem não é
   incomodado por movimento nem repara nele; quem é, encontra logo depois
   da primeira faixa que se move. */
.motion-toggle-row {
  display: flex;
  justify-content: flex-end;
  position: relative;
  z-index: 3;
  padding-bottom: var(--space-8);
}
.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 14px 6px 12px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--dur-base), border-color var(--dur-base), background var(--dur-base);
}
.motion-toggle:hover {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
  background: var(--surface-card);
}
/* No escuro (hero da Home, cartão da About): sem fundo no hover — o botão
   é controle, não faixa. Morava no home-v4.css como `.hero-motion …`. */
.motion-toggle--on-dark {
  color: var(--on-dark-muted);
  border-color: var(--on-dark-rule);
}
.motion-toggle--on-dark:hover,
.motion-toggle--on-dark:focus-visible {
  color: var(--text-on-dark);
  border-color: var(--on-dark-muted);
  background: transparent;
}
/* Ícone de pausa (duas barras) → play (triângulo) quando já está pausado.
   O estado é da página (`body.motion-paused`, site.js), não do botão: o
   rótulo diz a ação e não há `aria-pressed` (ver trend_motion_toggle()). */
.motion-toggle__icon {
  width: 9px;
  height: 11px;
  flex-shrink: 0;
  background: currentColor;
  clip-path: polygon(0 0, 34% 0, 34% 100%, 0 100%, 0 0, 66% 0, 100% 0, 100% 100%, 66% 100%, 66% 0);
}
body.motion-paused .motion-toggle__icon {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
/* Com movimento reduzido nada anda sozinho (cada folha para o que é dela, e
   o hero-fibers.js nem cria o canvas): um botão "Pause motion" ali não teria
   o que pausar, e um "Play motion" não teria o que tocar. */
@media (prefers-reduced-motion: reduce) {
  .motion-toggle { display: none; }
}

/* `motion-paused` (site.js) para as faixas. Com movimento reduzido elas já
   nascem paradas e o botão some — não há "retomar" (TRED-141). */
body.motion-paused .clients-track,
body.motion-paused .pillars-track { animation-play-state: paused; }

/* ============================================================
   8. SERVICES — acordeão empilhado, pin em CSS sticky
   ------------------------------------------------------------
   A trilha alta segura um bloco sticky de 100vh. Todos os N títulos
   ficam sempre visíveis; o scroll abre exatamente um conteúdo entre
   o título dele e o próximo. A conta
   `content = 100vh - N * title-h` faz item aberto + N títulos
   ocuparem a viewport exata, então o bloco pinado nunca rola por
   dentro. O GSAP aqui só informa qual item está ativo.
   ============================================================ */

.svc-intro {
  position: relative;
  background: var(--site-dark);
  color: var(--white);
  overflow: hidden;
}
.svc-intro__glow {
  position: absolute;
  top: -180px;
  right: -120px;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(98, 39, 155, 0.28) 0%, transparent 70%);
  pointer-events: none;
}
.svc-intro__inner {
  position: relative;
  z-index: 1;
  padding-top: var(--section-y);
  padding-bottom: var(--space-8);
}
.svc-intro h2 {
  font-size: var(--title-section);
  line-height: 1.05;
  color: var(--white);
  margin: var(--space-4) 0 0;
}

.svc-track {
  position: relative;
  background: var(--site-dark);
  height: calc(var(--count) * 62vh);
}
.svc-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--site-dark);
  color: var(--white);
  --svc-title-h: clamp(58px, 9.4vh, 96px);
  --svc-content-h: calc(100vh - var(--count) * var(--svc-title-h) - 6px);
}

.svc-item { border-top: 1px solid rgba(35, 199, 205, 0.20); }
.svc-heading { margin: 0; }
.svc-title {
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--svc-title-h);
  padding: 0;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: clamp(1.25rem, 2.2vw, 2rem);   /* 20 → 32: abaixo do h2 da seção (40), como h3 que é */
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--on-dark-faint);
  transition: color 0.35s;
}
.svc-item.is-open .svc-title,
.svc-title:hover { color: var(--white); }
.svc-title__label { flex: 1; }
/* O "+" só existe no acordeão de celular — ver o media query lá embaixo */
.svc-title__sign { display: none; }

/* `visibility` tira o painel fechado da árvore de acessibilidade — com
   só `height: 0; overflow: hidden` o leitor de tela lê os cinco textos
   de serviço em sequência, como se estivessem todos abertos. A
   transição de visibility é discreta: vira `hidden` no FIM do fecha e
   `visible` no INÍCIO do abre, então a animação continua visível. */
.svc-content {
  overflow: hidden;
  height: 0;
  opacity: 0;
  visibility: hidden;
  transition: height 0.55s var(--ease-out), opacity 0.4s ease, visibility 0.55s;
}
.svc-item.is-open .svc-content {
  height: var(--svc-content-h);
  opacity: 1;
  visibility: visible;
}
.svc-content-inner {
  display: flex;
  gap: var(--space-8);
  align-items: stretch;
  height: var(--svc-content-h);
  padding-bottom: var(--space-5);
}
.svc-copy {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.svc-copy p {
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.55;
  color: var(--on-dark-body);
  margin: 0;
}
.svc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}
.svc-tags li {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-pill);
  padding: 6px 13px;
  white-space: nowrap;
  line-height: 1;
}
.svc-cta { margin-top: var(--space-6); }
.svc-cta .btn { height: auto; padding: 14px 22px; font-size: 17px; color: var(--brand-ink); }

/* O quadro é SEMPRE 6:5, o mais largo que couber: 40% da linha ou a
   altura do conteúdo × 1,2, o que for menor (07/10/2026, TRED-138).
   Esticado à altura, ele ia de 0,58 (2560×1440, um retrato) a 1,4
   (1440×780) e o `cover` cortava as composições de cada painel — que
   trazem texto e enquadramento desenhados (hora do Smart Chat, timecode,
   o anúncio inteiro). Com o quadro travado, a arte de 1200×1000 entra
   inteira em qualquer desktop; em tela alta ele centra em vez de virar
   uma tira vertical. */
.svc-media {
  position: relative;
  flex: 0 0 auto;
  width: min(40%, (var(--svc-content-h) - var(--space-5)) * 1.2);
  aspect-ratio: 6 / 5;
  align-self: center;
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-height: 0;
}
/* `img` junto do `video`: na v4 o painel recebe o pôster como imagem
   (`stills`) e precisa preencher a moldura do mesmo jeito. */
.svc-media video,
.svc-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Grade das fotos reais do time (v4, Growth Team). As colunas vêm do
   partial (`--cols`, pela contagem: 9 → 3×3, 8 → 4×2, 10 → 5×2), para
   ninguém sobrar sozinho numa linha — com 10 pessoas em 3 × 3 o décimo
   retrato caía órfão numa quarta linha. As linhas dividem a altura por
   igual (`minmax(0, 1fr)`): uma linha implícita `auto` engolia a sobra.
   Os retratos são recortes da Home em 6:5 (`assets/team/home/`): cada
   pessoa sobre o mesmo fundo roxo-tinta, rosto na mesma escala e olhos na
   mesma linha — então o centro basta. */
.svc-media__grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 3px;
  background: var(--site-dark);
}
.svc-media__grid img {
  /* `static` de propósito: a regra genérica `.svc-media img` é absoluta e
     100 % — dentro da grade ela empilharia as oito no mesmo lugar */
  position: static;
  inset: auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: 50% 45%;
}
/* A função de cada um no hover (20/10/2026): quem está sob o mouse fica
   aceso e os outros apagam — a cadeira acesa da plateia do fechamento —, e
   o cargo sobe na base da foto, sobre um degradê da tinta do site. Só com
   mouse: no toque não há hover, e o `alt` de cada retrato já diz a função. */
.svc-media__person { position: relative; min-height: 0; overflow: hidden; }
.svc-media__role { display: none; }
@media (hover: hover) and (pointer: fine) {
  .svc-media__grid img {
    transition: opacity var(--dur-base) var(--ease-out),
                filter var(--dur-base) var(--ease-out);
  }
  .svc-media__grid:hover img { opacity: 0.4; filter: grayscale(0.7); }
  .svc-media__grid .svc-media__person:hover img { opacity: 1; filter: none; }
  .svc-media__role {
    display: block;
    position: absolute;
    inset: auto 0 0;
    padding: var(--space-7) var(--space-3) var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: 1.25;
    color: var(--white);
    text-align: center;   /* os retratos são centrados: o rótulo fica sob o rosto */
    text-wrap: balance;
    background: linear-gradient(to top, color-mix(in srgb, var(--site-dark) 92%, transparent) 30%, transparent);
    opacity: 0;
    translate: 0 6px;
    transition: opacity var(--dur-base) var(--ease-out),
                translate var(--dur-base) var(--ease-out);
    pointer-events: none;
  }
  .svc-media__person:hover .svc-media__role { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-media__role { translate: none; }
}

.svc-media__mesh {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 34px 34px;
}

/* ============================================================
   9. VALUE PROP
   ============================================================ */

.vp-section { background: var(--surface-page); overflow: hidden; }
.vp-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-9);
  align-items: start;
}
.vp-grid h2 {
  font-size: clamp(32px, 3.2vw, 52px);
  line-height: 1.08;
  margin: var(--space-4) 0 var(--space-5);
}
.vp-lede {
  font-size: var(--text-lg);
  line-height: 1.65;
  color: var(--text-body);
  margin: 0;
  max-width: 46ch;
}

.vp-list { border-bottom: 1px solid var(--border-default); }
.vp-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-4);
  align-items: baseline;
  border-top: 1px solid var(--border-default);
  padding: var(--space-5) 0;
}
.vp-item__n {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: 15px;
  color: var(--brand-primary);
}
.vp-item h3 {
  font-size: 22px;
  margin: 0 0 6px;
}
.vp-item p {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

@keyframes pillarsMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.pillars {
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-4) 0;
  overflow: hidden;
}
.pillars-track {
  display: flex;
  width: max-content;
  animation: pillarsMarquee 140s linear infinite;
}
.pillars-row { display: flex; align-items: center; }
.pillars-item { display: flex; align-items: center; gap: 28px; padding-right: 28px; }
.pillars-item span:first-child {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
  color: var(--brand-ink);
}
/* --neutral-400 (#A7A3AC) dava 2,3:1 sobre o off-white — reprova mesmo
   para texto grande, que exige 3:1. O soft gray do Manual mantém a
   alternância de ritmo com 4,9:1. */
.pillars-item:nth-child(even) span:first-child { color: var(--neutral-500); }
.pillars-diamond {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--brand-accent);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* ============================================================
   11. PROCESS
   ============================================================ */

.process-section {
  background: var(--surface-page);
  border-top: 1px solid var(--border-subtle);
}
.process-head { margin-bottom: var(--space-10); }
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.process-step {
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-6);
  border-left: 1px solid var(--border-subtle);
}
.process-step:first-child { border-left: none; padding-left: 0; }
.process-step__top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
/* O anel fica no turquesa da marca, mas o NÚMERO e o prazo são texto e
   precisam passar em contraste sobre o off-white: #16B9C1 dá 2,3:1, o
   teal-700 dá 5,6:1. Desvio consciente do UI kit. */
.process-step__n {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--brand-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  color: var(--teal-700);
}
.process-step__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(35, 199, 205, 0.3), transparent);
}
.process-step h3 {
  font-size: var(--text-h3);
  margin: 0 0 var(--space-3);
}
.process-step p {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0 0 var(--space-4);
}
.process-step__when {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  color: var(--teal-700);
}

/* ============================================================
   12. FAQ (`.faq2`) — o partial `template-parts/faq.php`
   ------------------------------------------------------------
   Uma seção de FAQ para o site inteiro: Home, About, Contact, Our
   Services e /faq/ (e, nos rascunhos, Pricing, Dealership e Home v1).
   Refeita em 18/10/2026 (TRED-145), a pedido ("abas refinadas"), a partir
   das abas do feedagency (vault: `06-Snippets/Secao de FAQ em duas
   colunas`). O formato fica — perguntas de um lado, a resposta grande do
   outro — e saem os três defeitos medidos a 1440 e a 390:
   - uma caixa de 2–3px de tinta por pergunta: a lista pesava mais que a
     resposta, que é o que se lê. Agora linhas finas, numeradas;
   - a resposta presa no topo da coluna: na 7ª pergunta da About ela
     ficava a ~490px dela, com ~600px de vazio embaixo. Agora o cartão se
     alinha à pergunta aberta (`--faq-y`, posto pelo site.js) e a seta
     da pergunta aponta para ele;
   - a fila lateral do celular, que mostrava uma pergunta por vez. Até
     1060 é lista, e a resposta abre logo abaixo da pergunta.
   E a seção entrou na `.wrap` e no `--section-y` do site: as medidas
   fluidas do feedagency (`--fq-*`) a deixavam ~10px fora do alinhamento
   das outras a 1440, e ~400px mais larga a 1920.
   ============================================================ */

.faq2 {
  --faq2-cols: minmax(0, 6fr) minmax(0, 5fr);
  --faq2-gap: clamp(3rem, 6vw, 6rem);
  padding-block: var(--section-y);
}
.faq2__layout {
  display: grid;
  grid-template-columns: var(--faq2-cols);
  column-gap: var(--faq2-gap);
}
/* cabeça no padrão de títulos: rótulo e frase "Seção" à esquerda, o apoio
   na coluna do cartão, rente à base do título */
.faq2__head .sec-eyebrow { margin-bottom: var(--space-3); }
.faq2__head h2 {
  margin: 0;
  font-size: var(--title-section);
  font-weight: var(--weight-bold);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.faq2__intro {
  grid-column: 2;
  align-self: end;
  max-width: 46ch;
  margin: 0;
  font-size: var(--title-lead);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}
.faq2__intro a,
.faq2__outro a,
.faq2__card a {
  color: var(--brand-primary);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.faq2__intro a:hover,
.faq2__outro a:hover,
.faq2__card a:hover { color: var(--purple-700); text-decoration-thickness: 2px; }

/* A lista tem as mesmas duas colunas da cabeça: as perguntas na primeira,
   o cartão da resposta aberta na segunda. */
.faq2__list {
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  grid-template-columns: var(--faq2-cols);
  column-gap: var(--faq2-gap);
  align-content: start;
}
/* sem cabeça (a /faq/, cujo h1 está no hero) a lista abre a seção */
.faq2__head ~ .faq2__list { margin-top: var(--space-9); }
.faq2__q {
  grid-column: 1;
  margin: 0;
  border-top: 1px solid var(--border-default);
}
.faq2__q:last-of-type { border-bottom: 1px solid var(--border-default); }

/* número · pergunta · seta */
.faq2__btn {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 1rem;
  align-items: baseline;
  column-gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) 0;
  border: 0;
  background: none;
  color: var(--brand-ink);
  font: inherit;
  font-size: var(--title-lead);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.faq2__btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.faq2__n {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-eyebrow);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.faq2__text { text-wrap: pretty; }
/* a seta curta da marca (a mesma das entregas da /our-services/ e da
   /solutions/): só aparece na pergunta aberta, apontando para o cartão */
.faq2__arrow {
  align-self: center;
  width: 1rem;
  height: 0.625rem;
  color: var(--brand-primary);
  opacity: 0;
  transform: translateX(-0.375rem);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.faq2__btn[aria-expanded="true"],
.faq2__btn[aria-expanded="true"] .faq2__n { color: var(--brand-primary); }
.faq2__btn[aria-expanded="true"] .faq2__arrow { opacity: 1; transform: none; }
@media (hover: hover) and (min-width: 1061px) {
  .faq2__btn:hover { color: var(--brand-primary); }
  .faq2__btn:hover .faq2__arrow { opacity: 0.45; transform: none; }
  .faq2__btn[aria-expanded="true"]:hover .faq2__arrow { opacity: 1; }
}

/* O cartão: fora do fluxo, na coluna 2 (a grade é o bloco de contenção de
   um filho absoluto), na altura da pergunta aberta. Fora do fluxo para não
   esticar as linhas da lista; o site.js garante que ele caiba (o
   `min-height` da lista e o teto do `--faq-y`). */
.faq2__a {
  grid-column: 2;
  position: absolute;
  top: var(--faq-y, 0px);
  left: 0;
  right: 0;
}
.faq2__q:has(> [aria-expanded="false"]) + .faq2__a { display: none; }
.faq2__card {
  padding: var(--space-6) var(--space-7);
  border: 1px solid var(--purple-100);
  border-radius: var(--radius-lg);
  background: var(--surface-accent-soft);
}
.faq2__q:has(> [aria-expanded="true"]) + .faq2__a .faq2__card {
  animation: faq2-in var(--dur-base) var(--ease-out);
}
@keyframes faq2-in {
  from { opacity: 0; transform: translateY(0.5rem); }
}
/* a resposta no corpo grande do padrão (`--title-lead-l`, 21px a 1440) */
.faq2__card p {
  margin: 0;
  font-size: var(--title-lead-l);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-tight);
  color: var(--brand-ink);
  text-wrap: pretty;
}
.faq2__card p + p { margin-top: var(--space-4); }

/* só na /faq/: a linha "Still have a question?" depois da lista */
.faq2__outro {
  grid-column: 1;
  margin: var(--space-6) 0 0;
  color: var(--text-muted);
}
/* o telefone não quebra no meio ("(561)" numa linha, o resto na outra) */
.faq2__outro a[href^="tel:"] { white-space: nowrap; }

@media (max-width: 1060px) {
  /* uma coluna — título, apoio, perguntas; a resposta abre logo abaixo
     da pergunta (o `.faq-a` antigo: grade 0fr → 1fr, altura real) */
  .faq2__layout,
  .faq2__list { display: block; }
  .faq2__intro { margin-top: var(--space-4); }
  .faq2__list { border-bottom: 1px solid var(--border-default); }
  .faq2__head ~ .faq2__list { margin-top: var(--space-7); }
  .faq2__q:last-of-type { border-bottom: 0; }
  /* sem hover no toque: a seta fica à vista, e gira para a resposta */
  .faq2__arrow { opacity: 1; transform: none; color: var(--text-muted); }
  .faq2__btn[aria-expanded="true"] .faq2__arrow { color: var(--brand-primary); transform: rotate(90deg); }
  .faq2__a {
    position: static;
    display: grid;
    grid-template-rows: 1fr;
  }
  .faq2__q:has(> [aria-expanded="false"]) + .faq2__a {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
  }
  /* sem o padding: border-box o manteria como altura do painel fechado */
  .faq2__clip { min-height: 0; overflow: hidden; }
  /* o cartão começa na coluna do texto da pergunta, não na do número */
  .faq2__card {
    margin: 0 0 var(--space-5) calc(3rem + var(--space-4));
    padding: var(--space-5);
  }
  /* só depois do primeiro toque: ao carregar, o site.js fecha a primeira
     sem que ela anime fechando na frente de ninguém */
  .faq2__list.is-live .faq2__a {
    transition: grid-template-rows var(--dur-base) var(--ease-out), visibility var(--dur-base);
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq2__q:has(> [aria-expanded="true"]) + .faq2__a .faq2__card { animation: none; }
}

/* ============================================================
   12d. FECHAMENTO COM NICHO (`.v4-finale`) — "Is your niche still open?"
   ------------------------------------------------------------
   Partial `template-parts/niche-finale.php`; Home v4, /pricing/ e as
   três galerias usam — é O fechamento padrão de página. Nasceu na v4
   (por isso o prefixo); o `--v4-ink-rgb` que o véu usa fica declarado
   aqui para não depender da raiz `.v4`.
   ------------------------------------------------------------
   Padrão fixado em 13/09/2026 (antes o card tinha o dobro da altura):
   título em UMA linha, Bebas no tamanho de Declaração (não de Chamada),
   apoio de uma frase em 21px, card de ~460px no desktop. É o quarto
   bloco da página, não o clímax dela — quem grita é o hero.
   ------------------------------------------------------------ */

.v4-finale {
  --v4-ink-rgb: 20, 10, 33;
  background: var(--site-dark);
  padding: clamp(3rem, 6vw, 6rem) 0 clamp(2rem, 4vw, 4rem);
}
/* O card é o evento; a seção é só o chão escuro em que ele assenta — o
   mesmo chão do rodapé logo abaixo, para a página terminar num bloco
   contínuo e não em faixa. */
.v4-finale__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  min-height: clamp(20rem, 28vw, 25rem);
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--text-on-brand);
  /* embaixo, o espaço da linha de prova (absoluta) */
  padding: clamp(2.5rem, 4vw, 3.25rem) var(--space-6) clamp(6.5rem, 9vw, 7.25rem);
  box-shadow: var(--shadow-lg);
}
.v4-finale__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* Véu: a imagem já é escura, mas o título precisa de contraste em
   qualquer ponto — o radial afunda o centro, onde o texto mora, e deixa
   as bordas respirar. */
.v4-finale__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 70% at 50% 45%, rgba(var(--v4-ink-rgb), 0.62), rgba(var(--v4-ink-rgb), 0.28) 70%, rgba(var(--v4-ink-rgb), 0.18)),
    linear-gradient(to top, rgba(var(--v4-ink-rgb), 0.72), transparent 40%);
}
.v4-finale__body { max-width: 52rem; }
.v4-finale .sec-eyebrow { margin-bottom: var(--space-4); }
.v4-finale__q {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--title-statement);   /* Declaração, não Chamada: uma linha */
  line-height: 0.9;
  letter-spacing: var(--tracking-display);
  color: var(--text-on-brand);
  text-wrap: balance;
}
.v4-finale__lede {
  margin: var(--space-4) auto 0;
  max-width: 52ch;
  text-wrap: pretty;   /* sem palavra sozinha na segunda linha */
  font-size: var(--title-lead);
  font-weight: var(--weight-medium);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.84);
}
.v4-finale__form {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-5);
}
.v4-finale__form input { min-width: min(24rem, 100%); }
.v4-finale__form input,
.nc-field input,
.nc-field select {
  height: 46px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-on-brand);
  font: inherit;
  font-size: var(--text-base);
  backdrop-filter: blur(8px);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.v4-finale__form input::placeholder,
.nc-field input::placeholder { color: rgba(255, 255, 255, 0.64); }
.v4-finale__form input:hover,
.nc-field input:hover,
.nc-field select:hover { border-color: rgba(255, 255, 255, 0.55); }
/* anel BRANCO: turquesa direto sobre o roxo da imagem é o que o Manual
   proíbe — mesma regra do fechamento anterior. `background-color` e não
   `background`: o select leva a seta como imagem de fundo. */
.v4-finale__form input:focus-visible,
.nc-field input:focus-visible,
.nc-field select:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 2px;
  border-color: transparent;
  background-color: rgba(255, 255, 255, 0.16);
}

/* — O formulário do fechamento da Home (Homepage Copy Brief, 19/10/2026) —
   Markup no template do CF7 "Trend Niche Check" (banco): `.nc-grid` com as
   `.nc-field` e o `.nc-submit`. Rótulo à vista em cima de cada campo
   e campo alinhado à esquerda, mesmo no card centrado — formulário se lê
   por coluna. Cinco campos desde a TRED-151 (20/10/2026), em três linhas:
   nicho | mercado (a chave da exclusividade), a verba sozinha na linha
   (`--wide`, a pergunta que qualifica) e e-mail | telefone, o par. */
.v4-finale__check { max-width: 44rem; margin: var(--space-6) auto 0; text-align: left; }
.nc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
.nc-field--wide { grid-column: 1 / -1; }
.nc-field { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.nc-field label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: rgba(255, 255, 255, 0.92);
}
.nc-field .wpcf7-form-control-wrap { display: block; }
.nc-field input,
.nc-field select { width: 100%; }
.nc-field select {
  appearance: none;
  padding-right: 48px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 16px;
}
/* a lista que o sistema abre é clara: sem isto o texto branco some nela */
.nc-field select option { color: var(--brand-ink); background-color: var(--white); }
.nc-help { font-size: var(--text-sm); line-height: 1.4; color: rgba(255, 255, 255, 0.76); }
.v4-finale__check .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--danger-soft);
}
.nc-field .wpcf7-not-valid { border-color: var(--danger-soft); }
.nc-submit { display: flex; justify-content: center; margin: var(--space-6) 0 0; }
/* o spinner do CF7 ocuparia ~66px ao lado do botão e o tiraria do centro
   (a mesma armadilha do Contact); o "enviando" é o botão apagado */
.v4-finale__check .wpcf7-spinner { display: none; }
.v4-finale__check .wpcf7-form.submitting .nc-submit .btn { opacity: 0.6; pointer-events: none; }
.v4-finale__check .wpcf7 form.wpcf7-form .wpcf7-response-output {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  text-align: center;
  color: var(--white);
}
.v4-finale__check .wpcf7 form.wpcf7-form.invalid .wpcf7-response-output,
.v4-finale__check .wpcf7 form.wpcf7-form.failed .wpcf7-response-output { border-color: var(--danger-soft); }
/* a resposta de "Under $2,000", no lugar do formulário */
.v4-finale__answer {
  margin: var(--space-6) auto 0;
  max-width: 46ch;
  text-align: center;
  font-size: var(--title-lead);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  color: var(--white);
}
.v4-finale__answer:focus { outline: none; }
/* sem a linha de números embaixo, o card não reserva o espaço dela */
.v4-finale__card--bare { padding-bottom: clamp(2.5rem, 4vw, 3.25rem); }
.v4-finale__or {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.72);
}
.v4-finale__or a {
  color: var(--text-on-brand);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.v4-finale__or a:hover,
.v4-finale__or a:focus-visible { text-decoration-thickness: 2px; }

/* A linha de prova: os três números que moravam em Our clients, agora
   no rodapé do card — onde a pessoa decide. Figura em Bebas, rótulo
   pequeno; sem a nota, que aqui seria ruído. */
.v4-finale__proof {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: var(--space-5) var(--space-6);
  list-style: none;
  display: flex;
  justify-content: center;
  gap: clamp(2rem, 6vw, 6rem);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(var(--v4-ink-rgb), 0.38);
  backdrop-filter: blur(6px);
}
.v4-finale__proof li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.v4-finale__proof strong {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
}
.v4-finale__proof span {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 760px) {
  /* No celular a linha de prova deixa de ser absoluta: com três itens
     ela quebrava em duas linhas e cobria o "or call". Vira fluxo, ao pé
     do card, em três colunas iguais com o rótulo quebrando por dentro. */
  .v4-finale__card { display: flex; flex-direction: column; align-items: stretch; border-radius: var(--radius-xl); min-height: 0; padding: 3rem var(--space-5) 0; }
  .v4-finale__body { max-width: none; }
  .v4-finale__form { flex-direction: column; align-items: stretch; }
  .v4-finale__form input,
  .v4-finale__form .btn,
  .nc-submit .btn { width: 100%; }
  .nc-grid { grid-template-columns: minmax(0, 1fr); }
  .v4-finale__card--bare { padding-bottom: 3rem; }
  .v4-finale__proof { position: static; margin: var(--space-7) calc(-1 * var(--space-5)) 0; gap: var(--space-3); padding: var(--space-5) var(--space-4); }
  .v4-finale__proof li { flex: 1 1 0; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 0; }
  .v4-finale__proof span { font-size: var(--text-xs); line-height: 1.3; }
}

/* ============================================================
   13. CTA BAND
   ============================================================ */

.cta-band {
  position: relative;
  background: linear-gradient(135deg, var(--purple-500) 0%, var(--purple-700) 55%, var(--purple-900) 100%);
  color: var(--white);
  overflow: hidden;
}
.cta-band__glow {
  position: absolute;
  bottom: -240px;
  left: -140px;
  width: 680px;
  height: 680px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 185, 193, 0.35) 0%, transparent 70%);
  pointer-events: none;
}
.cta-band__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: clamp(64px, 9vh, 112px) var(--container-pad);
}
.cta-band .sec-eyebrow { margin-bottom: var(--space-5); }
.cta-band h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--title-call);
  line-height: 0.9;
  letter-spacing: var(--tracking-display);
  color: var(--white);
  margin: 0 0 var(--space-5);
}
.cta-band p {
  font-size: var(--title-lead-l);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  max-width: 48ch;
  margin: 0 auto var(--space-7);
}
.cta-band__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--white);
  color: var(--brand-ink);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  padding: 18px 36px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: var(--weight-bold);
  transition: transform var(--dur-base), box-shadow var(--dur-base);
}
.cta-band__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
}

.ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--brand-ink);
  padding: 15px 30px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--weight-bold);
  transition: color var(--dur-base), border-color var(--dur-base);
}
.ghost-btn:hover { color: var(--brand-primary); border-color: var(--brand-primary); }

.btn-row { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }

/* ============================================================
   14. FOOTER
   ------------------------------------------------------------
   Cartão escuro, três colunas de menu, bloco "Talk to us" e a faixa de
   status — porte do "Footer 14" da Watermelon UI (MIT), sem Motion nem
   Tailwind. Sem a moldura arredondada do original: o cliente pediu o
   rodapé colado nas bordas, na própria cor (05/09/2026). A palavra
   gigante do original saiu em 17/09/2026: o fecho da página é a faixa
   de status, e o respiro do fim virou padding do __inner.
   ============================================================ */

.site-footer {
  position: relative;
  background: var(--site-footer);
  color: var(--white);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.site-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  /* O padding de baixo é o fim da página. Era a palavra gigante que o
     dava; sem ela, 40px aqui + os 24 da própria faixa fecham em 64 a
     partir da linha legal — os mesmos 64 que abrem o rodapé. */
  padding: var(--space-9) var(--container-pad) var(--space-7);
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 2.5fr) minmax(0, 1.1fr);
  gap: var(--space-8) var(--space-9);
  align-items: start;
}

/* O rodapé do UI kit usa brancos entre 18% e 40% de opacidade — de
   1,9:1 a 3,3:1 sobre #120A1C. É o pior contraste da página inteira, e
   ali estão telefone, e-mail e endereço. Os valores abaixo mantêm a
   hierarquia (marca > links > legal) mas nenhum texto fica abaixo de
   ~5:1. Desvio consciente do UI kit. */
.footer-brand img { height: 52px; width: auto; margin-bottom: var(--space-4); display: block; }   /* sem opacidade: o Manual proíbe reduzi-la */
/* a tagline oficial: a voz da marca, um degrau acima da descrição */
.footer-brand .footer-brand__tagline {
  margin: 0 0 var(--space-2);
  max-width: none;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--on-dark-strong);
}
.footer-brand p {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.58);
  max-width: 30ch;
  margin: 0;
}

.footer-nav {
  display: grid;
  /* Três: Company, Solutions e Connect. A "Work" saiu em 17/09/2026 com as
     galerias; a Solutions entrou em 18/10/2026, a pedido do cliente. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-7) var(--space-6);
}
.footer-col h2 {
  font-size: 14px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  line-height: 1;
  text-transform: uppercase;
  color: var(--on-dark-strong);
  margin: 0 0 var(--space-4);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin: 0; list-style: none; }
/* Sem marcação de "página atual" no rodapé, de propósito: links de
   âncora (#selected-work) contam como item atual na própria Home, e o
   realce sai em dois itens quaisquer — parece defeito, não orientação.
   Quem indica onde você está é o menu do header. */
.footer-col a {
  display: block;
  font-size: 14px;
  line-height: 1.25;
  color: var(--on-dark-body);
  text-decoration: none;
  padding: 5px 0;
  transition: color 0.15s;
}
.footer-col a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }

/* — Talk to us: no lugar do formulário de assinatura do bloco original — */
.footer-social { list-style: none; margin: var(--space-5) 0 0 -10px; padding: 0; display: flex; gap: 2px; }
.footer-social li { margin: 0; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  color: var(--on-dark-muted);
  transition: color 0.15s, background 0.15s;
}
.footer-social a:hover { color: var(--white); background: rgba(255, 255, 255, 0.08); }
.footer-social a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.footer-talk__title {
  font-size: 14px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  line-height: 1;
  text-transform: uppercase;
  color: var(--on-dark-strong);
  margin: 0 0 var(--space-3);
}
.footer-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
/* Alvo de toque: WCAG 2.2 (2.5.8) pede 24×24 mínimo. O padding vertical
   resolve sem mudar a tipografia; `width: fit-content` evita que a área
   clicável se estenda pela coluna inteira. */
.footer-contact a {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--white);
  text-decoration: none;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  width: fit-content;
  padding: 2px 0;
}
.footer-contact a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* — Faixa de status: o horário é o único "status" que uma agência tem — */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px var(--space-5);
  margin-top: var(--space-7);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--on-dark-rule);
}
.footer-bottom span,
.footer-bottom a {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.58);
  letter-spacing: 0.04em;
  text-decoration: none;
}
.footer-status { display: inline-flex; align-items: center; gap: 8px; min-height: 26px; }
.footer-status__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--brand-accent);
  box-shadow: 0 0 0 4px rgba(22, 185, 193, 0.16);
  flex: none;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px var(--space-5); align-items: center; }
.footer-legal a { display: inline-flex; align-items: center; min-height: 26px; }
.footer-legal a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1060px) {
  .footer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-nav { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .site-footer__inner { padding-top: var(--space-8); }
  .footer-top { grid-template-columns: 1fr; gap: var(--space-7); }
  /* As três colunas do desktop, mais justas (20/10/2026). Eram duas,
     porque três ficavam estreitas para "Dealership Program" — que saiu do
     menu em 15/09 —, e a terceira coluna caía sozinha à esquerda numa linha
     nova, com um buraco à direita. O item mais longo hoje ("Smart Chat AI",
     ~85px) cabe a 360; a 320 ele quebra dentro da coluna, com o alvo de 44. */
  .footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-3); }
  .footer-bottom { flex-direction: column; align-items: center; gap: 8px; }
  /* O horário quebra em duas linhas aqui: em flex, o ponto ficava sozinho
     na borda esquerda, longe do texto centrado. Em linha, ele abre a
     primeira linha. */
  .footer-status { display: block; text-align: center; text-wrap: balance; }
  .footer-status__dot { display: inline-block; vertical-align: middle; margin: -2px 8px 0 0; }
}

/* Alvos de toque no celular (skill mobile-first, medido em 15/09/2026):
   os links do rodapé tinham 28px e nasciam colados (0px entre um e o
   próximo — eram os "vizinhos a menos de 8px" de toda página), os ícones
   sociais 40px, os legais 26px, telefone e e-mail 28px, a migalha 24px e
   o "Pause motion" 32px. 44px é o piso do toque.

   Limiar 1060, não 760: é onde o header vira hambúrguer, e a 768 (iPad)
   o toque é real — escopado a 760 os alvos voltavam a 28px no tablet.
   A migalha (36px) mora no FIM do arquivo: a regra base dela vem depois
   desta linha, e em igualdade de especificidade quem vem depois ganha. */
@media (max-width: 1060px) {
  .footer-col a { display: flex; align-items: center; min-height: 44px; padding: 0; }
  .footer-legal a { min-height: 44px; }
  .footer-social { gap: 6px; margin-left: -12px; }
  .footer-social a { width: 44px; height: 44px; }
  .footer-contact a { min-height: 44px; }
  .motion-toggle { min-height: 44px; }
}

/* ============================================================
   15. PÁGINAS INTERNAS (fallback: post, página, arquivo, 404)
   ============================================================ */

/* O invólucro de toda página interna: trilha + h1 + linha de apoio,
   sobre o mesmo fundo escuro da Home. É o que faz o site parecer um só.

   O h1 daqui é deliberadamente menor que o da Home (62px contra 96px).
   O hero da Home é o espetáculo do site — se cada interna tivesse o
   seu, nenhum seria. */
.page-hero {
  background: var(--site-dark);
  color: var(--white);
  padding: clamp(148px, 19vh, 208px) 0 clamp(52px, 7vh, 84px);
}
.page-hero__inner { display: flex; flex-direction: column; align-items: flex-start; }
.page-hero h1 {
  color: var(--white);
  font-size: clamp(36px, 4.4vw, 62px);
  line-height: 1.04;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  margin: 0;
  max-width: 20ch;
}
.page-hero p,
.page-hero__lead {
  color: var(--on-dark-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  margin-top: var(--space-4);
  max-width: 58ch;
}

/* — Trilha de navegação — */

.breadcrumb { margin-bottom: var(--space-5); }
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumb li { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.breadcrumb a,
.breadcrumb [aria-current] {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  /* 24px de alvo mínimo (WCAG 2.5.8) sem inflar a tipografia. */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.breadcrumb a { color: var(--on-dark-muted); text-decoration: none; transition: color var(--dur-base); }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb [aria-current] { color: var(--brand-accent-bright); }
.breadcrumb__sep { display: inline-flex; color: rgba(255, 255, 255, 0.34); }

/* Medida de leitura limitada, mas alinhada à esquerda com o h1 do
   page-hero — centralizar deixava o título numa margem e o texto
   noutra. */
.entry-content {
  max-width: var(--content-max);
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  /* o e-mail de contato é uma palavra só de 33 letras: a 320px, com o
     espaçamento de texto da WCAG 1.4.12, ele passava da tela e era cortado */
  overflow-wrap: break-word;
}
.entry-content > * + * { margin-top: var(--space-5); }
.entry-content h2 { font-size: var(--text-h2); margin-top: var(--space-9); }
.entry-content h3 { font-size: var(--text-h3); margin-top: var(--space-7); }
.entry-content a { color: var(--text-link); text-underline-offset: 3px; }
.entry-content ul,
.entry-content ol { padding-left: var(--space-5); }
.entry-content li + li { margin-top: var(--space-2); }
.entry-content blockquote {
  border-left: 3px solid var(--brand-accent);
  padding-left: var(--space-5);
  margin-left: 0;
  color: var(--text-muted);
}

.post-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.post-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.post-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.post-card h2 { font-size: var(--text-h3); margin: 0 0 var(--space-3); }
.post-card h2 a { color: inherit; text-decoration: none; }
.post-card h2 a:hover { color: var(--brand-primary); }
.post-card time { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); }

/* ============================================================
   16. SCROLL REVEALS
   ------------------------------------------------------------
   Transição CSS disparada por uma classe que o IntersectionObserver
   aplica. Era GSAP; não precisava ser — são três transições de
   opacity e transform, que o compositor resolve sem manter um loop
   de animação em JS. E, mais importante, funciona no celular sem
   baixar a biblioteca.

   O estado inicial só vale quando o JS assume (classe `js` no
   <html>): sem JS o conteúdo aparece normalmente, nunca invisível
   para sempre.
   ============================================================ */

/* Sem `will-change` aqui: são ~12 elementos e promovê-los todos a
   camada própria antes de qualquer um entrar em cena custa mais do
   que economiza. `will-change` é dica pontual para animação cara e
   conhecida — o marquee — não carimbo padrão. */
.js .reveal,
.js .reveal-left,
.js .reveal-scale {
  opacity: 0;
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.js .reveal       { transform: translateY(40px); }
.js .reveal-left  { transform: translateX(-40px); }
.js .reveal-scale { transform: scale(0.94); }

.js .reveal.is-revealed,
.js .reveal-left.is-revealed,
.js .reveal-scale.is-revealed {
  opacity: 1;
  transform: none;
}

/* Cascata nos grupos: cada item entra um pouco depois do anterior,
   em vez de o bloco inteiro aparecer de uma vez. */
.js .reveal:nth-child(2)  { transition-delay: 0.08s; }
.js .reveal:nth-child(3)  { transition-delay: 0.16s; }
.js .reveal:nth-child(4)  { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal,
  .js .reveal-left,
  .js .reveal-scale { opacity: 1; transform: none; transition: none; }
  /* As faixas nascem PARADAS. O "retomar" pelo botão saiu em 12/10/2026
     (TRED-141): com movimento reduzido o botão some, e o `motion-playing`
     do site.js vale sempre que não há pausa — as regras religavam as
     faixas da Home v1 sem botão nenhum na tela. */
  .clients-track,
  .pillars-track { animation-play-state: paused; }
  * { transition-duration: 0.01ms !important; }
  /* Sem o voo dos cards as âncoras do hero ficariam como um vazio
     de 650px na direita — melhor o hero ocupar a largura toda. */
  .hero-stage-wrap { display: none; }
  .hero-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   17. RESPONSIVO
   ------------------------------------------------------------
   1060px é o corte do UI kit: abaixo dele o hero deixa de ser
   sticky, os cards param de voar (o GSAP matchMedia não roda) e o
   acordeão de serviços vira lista simples com tudo aberto.
   ============================================================ */

@media (max-width: 1060px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; position: relative; }

  /* A barra NÃO pode quebrar em duas linhas: quebrando, ela vira um
     bloco de 150px de altura em cima da chamada do hero. Logo menor,
     gaps menores, e o menu aberto é um painel absoluto — nunca um
     segundo item da flex row. */
  .site-header { padding: 14px 16px; }
  .site-header__bar { position: relative; flex-wrap: nowrap; gap: 10px; padding: 0 10px; }
  .site-header__logo img { height: 50px; margin-block: -5px; }   /* marca ~21 → ~26px, barra igual (ver a regra base) */
  /* Alvos de toque (skill mobile-first, medido em 15/09/2026): o botão
     "Let's talk" tinha 38px e o link do logo 40px. 44px é o piso. */
  .site-header .btn--sm { height: 44px; }
  .site-header__logo { min-height: 44px; }
  .site-header__right { gap: 8px; }
  .is-scrolled .site-header__bar { padding: 8px 8px 8px 14px; }

  .nav-links.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    padding: 10px;
    background: var(--site-nav-scrolled);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(98, 39, 155, 0.35);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 48px rgba(5, 2, 12, 0.5);
    /* cabe na tela baixa (320×256 é 1280 com 400% de zoom): sem isto o
       "Contact" ficava abaixo da borda, sem rolagem que o alcançasse */
    max-height: calc(100dvh - 96px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav-links.is-open a { padding: 12px 16px; font-size: 15px; }

  /* Submenu no celular: lista aninhada, SEMPRE aberta — sem botão de
     expandir. São quatro filhos; com os cinco itens de topo dá nove
     linhas, que cabem no painel. Um acordeão aqui só acrescentaria um
     toque entre a pessoa e a página que ela quer, e um estado a mais
     para dar errado. O chevron do desktop sai: não há o que abrir. */
  .nav-links.is-open .nav-chevron { display: none; }
  .nav-links.is-open .sub-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    min-width: 0;
    padding: 0 0 4px;
    margin: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    box-shadow: none;
  }
  .nav-links.is-open .sub-menu::before { content: none; }
  /* Recuo com régua: diz "isto pertence ao item de cima" sem depender
     só do espaço em branco, que some quando o item pai quebra em duas
     linhas. */
  .nav-links.is-open .sub-menu a {
    padding-left: 30px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.62);
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-left: 16px;
  }

  .hero-section { position: relative; min-height: auto; padding-bottom: 40px; }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 44px;
    padding-top: 104px;
    align-items: start;
  }
  .hero-stage { min-height: min(112vw, 500px); }
  /* sem o voo dos cards, as âncoras não servem para nada — o palco
     do hero recebe o poster do primeiro case como cartão estático */
  .hero-stage-wrap { display: none; }

  .vp-grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .process-step { border-left: none; padding-left: 0; }
  .post-list { grid-template-columns: repeat(2, 1fr); }

  /* ---- Services: acordeão de verdade, um aberto por vez ----
     Antes tudo ficava aberto e a seção ocupava 3,8 telas, com três
     painéis de mídia vazios e o mesmo CTA cinco vezes. Aqui o pin some
     (não há para onde pinar) e a lista vira acordeão comum.

     A altura usa grade 0fr→1fr em vez do `--svc-content-h` do desktop:
     lá a altura é calculada para o bloco pinado caber exato na viewport;
     aqui o conteúdo é que manda. A regra base tem 3 classes, então
     estas precisam de 4 para vencer. */
  .svc-track { height: auto; }
  .svc-sticky { position: static; height: auto; overflow: visible; }

  .svc-title {
    height: auto;
    padding: var(--space-5) 0;
    color: var(--white);
    gap: var(--space-4);
  }
  .svc-title__sign {
    display: block;
    flex-shrink: 0;
    font-weight: var(--weight-regular);
    font-size: 28px;
    line-height: 1;
    color: var(--brand-accent-bright);
    transition: transform 0.3s var(--ease-out);
  }
  .svc-item.is-open .svc-title__sign { transform: rotate(45deg); }

  .svc-sticky .svc-item .svc-content {
    display: grid;
    grid-template-rows: 0fr;
    height: auto;
    opacity: 1;
    visibility: hidden;
    transition: grid-template-rows 0.45s var(--ease-out), visibility 0.45s;
  }
  .svc-sticky .svc-item.is-open .svc-content {
    grid-template-rows: 1fr;
    height: auto;
    visibility: visible;
  }

  /* Ordem de leitura: texto → tags → mídia → CTA. Estava texto → tags →
     CTA → mídia, o que deixava a imagem órfã, separada do que ilustra.
     `display: contents` promove os filhos de .svc-copy a irmãos da
     mídia, e aí `order` resolve sem mexer no HTML nem no desktop. */
  /* `padding-bottom` aqui NÃO some quando o painel colapsa: com
     box-sizing border-box, uma caixa de altura 0 ainda tem a altura do
     próprio padding. Eram 40px × 4 itens fechados de espaço morto. O
     respiro final foi para o CTA, que é conteúdo e portanto é clipado
     junto. */
  .svc-content-inner {
    flex-direction: column;
    height: auto;
    gap: var(--space-5);
    padding-bottom: 0;
    overflow: hidden;
    min-height: 0;
  }
  .svc-copy { display: contents; }
  .svc-copy p    { order: 1; }
  .svc-tags      { order: 2; margin-top: 0; }
  .svc-media     { order: 3; }
  .svc-cta       { order: 4; margin-top: 0; padding-bottom: var(--space-7); }

  /* aqui o quadro volta a ocupar a coluna: a arte de celular é 16:9 */
  .svc-media { width: 100%; align-self: stretch; aspect-ratio: 16 / 9; min-height: 200px; flex: none; }
  /* O painel do time é o único com grade: 16/9 dava células de 111 × 62
     — nove rostos em tiras. 6:5 é a proporção dos recortes da Home: a
     célula mostra o retrato inteiro, como no desktop. */
  .svc-media:has(.svc-media__grid) { aspect-ratio: 6 / 5; }
  /* Painel sem vídeo é retângulo vazio de meia tela no celular. Fora. */
  .svc-media--empty { display: none; }

  body.svc-pinned .site-header { transform: none; }
}

@media (max-width: 700px) {
  .work-grid,
  .process-grid,
  .post-list { grid-template-columns: 1fr; }

  /* Em coluna única o 9:16 dá um card de ~690px: quatro deles são
     2.800px de rolagem só de Selected Work. Em 4:5 o número e o nome
     continuam grandes e a seção volta a ter tamanho de seção. */
  .flip-slot { aspect-ratio: 4 / 5; }
  .clients-logo { height: 68px; width: clamp(140px, 40vw, 180px); }
  .hero-cta-row { width: 100%; }
  .hero-cta-row .hero-cta-primary,
  .hero-cta-row .hero-cta-secondary { flex: 1 1 100%; justify-content: center; }
  .hero-title { white-space: normal; }
  .section-sheet { margin-top: -24px; }
}

/* Selected Work no tablet: três por linha, a última centrada. Em duas
   colunas os cinco cards (19/10/2026) davam três linhas de ~700px, a
   última com um card sozinho. Só até 761: abaixo é a fila lateral, e o
   `wrap` + `center` sobrariam nela (centro numa fila rolável corta o
   começo). */
@media (min-width: 761px) and (max-width: 1060px) {
  .work-grid { display: flex; flex-wrap: wrap; justify-content: center; }
  .flip-slot { flex: 0 0 calc((100% - 2 * var(--space-4)) / 3); }
}

/* Selected Work no celular: fila lateral (01/10/2026, a pedido). Empilhados,
   os quatro cards eram ~1.600px de rolagem; em fila a seção cabe numa tela.
   Rolagem nativa com encaixe por card — nada de prender a tela —, o próximo
   card aparecendo na borda e a régua "Swipe" embaixo. O DOM é o mesmo do
   desktop (o voo do GSAP mira `.work-grid`/`.flip-slot`): aqui só muda o
   layout. Quem toca o vídeo é o card que assenta (home.js).

   Desde 10/10/2026 (TRED-140) o padrão é UTILITÁRIO: `.swipe-row` numa
   lista e `trend_swipe_rule()` logo depois dela fazem o mesmo em qualquer
   página (o time e o processo da /our-services/, os sistemas da
   /solutions/). O site.js move a régua (`--p`) e, havendo uma nav com
   `data-swipe-tabs` cujos links apontam para os cartões, marca a aba do
   cartão à vista. A largura do cartão é `--swipe-card` (78%, o da Selected
   Work). A Home mantém as classes dela — home.js e o Flip as miram — e o
   CSS é um só, por lista de seletores. Acima de 760 a classe não faz nada. */
.work-swipe, .swipe-rule { display: none; }
@media (max-width: 760px) {
  .work-grid, .swipe-row {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--container-pad));
    padding-inline: var(--container-pad);
    scroll-padding-inline: var(--container-pad);
    /* a fila corta o que passa da caixa: sem este respiro, o anel de foco
       do card saía com 1 ou 2 dos 4 lados (TRED-141) */
    padding-block: 6px;
    margin-block: -6px;
    scrollbar-width: none;
  }
  .work-grid::-webkit-scrollbar, .swipe-row::-webkit-scrollbar { display: none; }
  .flip-slot { flex: 0 0 78%; scroll-snap-align: start; aspect-ratio: 4 / 5; }
  .swipe-row > * { flex: 0 0 var(--swipe-card, 78%); min-width: 0; scroll-snap-align: start; }
  /* a fila é rolável pelo teclado (o site.js lhe dá tabindex): anel turquesa */
  .swipe-row:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

  .work-swipe, .swipe-rule {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-5) 0 0;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--text-muted);
  }
  /* a régua mostra onde a fila está: o polegar anda com a rolagem (`--p`
     de 0 a 1, posto pelo home.js ou pelo site.js) e ocupa ¼ dela */
  .work-swipe__bar, .swipe-rule__bar {
    position: relative;
    width: 64px;
    height: 2px;
    border-radius: var(--radius-pill);
    background: var(--border-default);
    overflow: hidden;
  }
  .work-swipe__bar i, .swipe-rule__bar i {
    position: absolute;
    inset: 0 auto 0 0;
    width: 25%;
    border-radius: inherit;
    background: var(--brand-primary);
    transform: translateX(calc(var(--p, 0) * 300%));
  }
  .work-swipe svg, .swipe-rule svg { width: 14px; height: 14px; color: var(--brand-primary); }
}

/* ============================================================
   18. PÁGINAS DE CONVERSÃO (services · pricing · thanks — a /contact/ tem folha própria, contact.css)
   ------------------------------------------------------------
   Fase 1 do plano em `docs/plano-paginas.md`. Tudo aqui herda o
   invólucro do bloco 15 — hero escuro com trilha e faixa de CTA — e
   só desenha o miolo de cada página.
   ============================================================ */

/* — cabeça de seção, compartilhada pelas quatro — */

.sec-head { max-width: 62ch; margin-bottom: var(--space-8); }
.sec-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head--center .eyebrow { justify-content: center; }

/* ------------------------------------------------------------
   18.1 SERVICES — índice de disciplinas
   ------------------------------------------------------------
   Índice, não grade de cards. Dez cards de ícone + título + texto
   seriam dez retângulos iguais dizendo "somos completos" sem que se
   leia nenhum. Duas colunas: nome à esquerda em peso alto, descrição
   à direita. O olho desce pela coluna de nomes e só entra no texto
   do que interessa.
   ------------------------------------------------------------ */

.svc-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-subtle); }

.svc-index__row {
  display: grid;
  grid-template-columns: minmax(0, 22ch) minmax(0, 1fr);
  gap: var(--space-4) var(--space-8);
  align-items: baseline;
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--border-subtle);
  margin: 0;
}

.svc-index__name {
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  line-height: 1.25;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0;
  text-wrap: balance;
}
.svc-index__name a { color: inherit; text-decoration: none; transition: color var(--dur-base); }
.svc-index__name a:hover { color: var(--brand-primary); }
.svc-index__arrow {
  vertical-align: -3px;
  margin-left: 4px;
  color: var(--brand-accent);
  transition: transform var(--dur-base) var(--ease-out);
}
.svc-index__name a:hover .svc-index__arrow { transform: translateX(4px); }

.svc-index__body { margin: 0; color: var(--text-body); max-width: 62ch; }

/* ------------------------------------------------------------
   18.2 SERVICES — tabela comparativa
   ------------------------------------------------------------
   31 linhas x 3 planos, cinco grupos. Sobre fundo claro de
   propósito: texto branco em tabela densa cansa muito antes da linha
   31, e esta é a página que precisa ser lida até o fim.
   ------------------------------------------------------------ */

.cmp-section { background: var(--surface-sunken); }
.cmp-lead { margin: var(--space-4) auto 0; color: var(--text-body); max-width: 60ch; }

/* Rola na horizontal quando não couber. Região rolável precisa ser
   alcançável por teclado (WCAG 2.1.1) — daí o `tabindex="0"` no
   markup e o anel de foco visível aqui. */
.cmp-scroll {
  /* `position: relative` é obrigatório: os `.screen-reader-text` das
     células são `position: absolute`, e sem um ancestral posicionado DENTRO
     do contêiner rolável eles escapam do clip — eram 89px de rolagem
     horizontal na página inteira a 390px. */
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
}
.cmp-scroll:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.cmp-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.cmp-table th,
.cmp-table td { padding: 12px 16px; text-align: center; border-bottom: 1px solid var(--border-subtle); }

/* A coluna de rótulos acompanha a rolagem. Sem isto, rolar para ver
   Domination faz perder o nome da linha — e a tabela deixa de
   comparar coisa nenhuma. Era o defeito da versão antiga. */
.cmp-table th[scope="row"],
.cmp-table__corner {
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: left;
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  background: var(--surface-card);
  min-width: 148px;
}

.cmp-table thead th { vertical-align: bottom; padding-top: var(--space-6); }
.cmp-tier { min-width: 152px; }
.cmp-tier__name {
  display: block;
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.cmp-tier__badge {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--brand-accent);
  color: var(--purple-900);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.cmp-tier__note {
  display: block;
  margin-top: 8px;
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  line-height: 1.35;
  color: var(--text-muted);
  text-wrap: balance;
}

/* A coluna recomendada é uma faixa contínua, do cabeçalho à última
   linha — é o que faz "Scale" ler como escolha, e não como a coluna
   que calhou de ficar no meio. */
.cmp-tier--rec,
.cmp-cell--rec { background: var(--surface-accent-soft); }
.cmp-tier--rec { border-top: 3px solid var(--brand-primary); }

.cmp-group th {
  text-align: left;
  padding-top: var(--space-6);
  padding-bottom: 10px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-primary);
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-default);
}

.cmp-yes { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; color: var(--brand-primary); }
.cmp-yes small { color: var(--text-muted); font-size: 11px; line-height: 1.3; max-width: 16ch; }
/* O travessão precisa recuar diante do ✓, mas ele CARREGA significado
   ("não incluído") — então recua por tamanho e peso, nunca apagando a
   cor: `--text-faint` sobre branco dá 2,48:1 e reprova até o mínimo de
   3:1 de elemento gráfico. */
.cmp-no { color: var(--text-muted); font-weight: var(--weight-regular); font-size: 15px; }
.cmp-level { font-weight: var(--weight-semibold); color: var(--text-strong); }

.cmp-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: var(--space-7);
}
.cmp-foot p { margin: 0; color: var(--text-body); max-width: 52ch; }

/* ------------------------------------------------------------
   18.5 THANK YOU
   ------------------------------------------------------------ */

/* A confirmação herda o `page-hero` como toda interna. Antes ela nascia
   sobre o fundo claro, e o header — logo e nav brancos, desenhados para o
   fundo escuro — desaparecia: a única página com a navegação ilegível era
   a que a pessoa vê logo depois de converter. */
.thanks__hero .thanks__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-pill);
  /* Branco entre o ✓ roxo e o fundo escuro — nunca turquesa direto no roxo. */
  background: var(--white);
  color: var(--brand-primary);
  margin-bottom: var(--space-6);
}
.thanks__hero .page-hero__lead strong { color: var(--white); font-weight: var(--weight-semibold); }
/* `.page-hero p` tem mais especificidade que `.thanks__meta` sozinho. */
.thanks__hero .thanks__meta { font-size: var(--text-base); color: var(--on-dark-muted); margin-top: var(--space-5); }
.thanks__hero .thanks__meta a { color: var(--white); text-underline-offset: 3px; }

.thanks { background: var(--surface-page); }
.thanks__inner { max-width: 62ch; }
.thanks__next { margin-bottom: var(--space-8); }
.thanks__next a { color: var(--text-link); text-underline-offset: 3px; }
.thanks__next h2 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-4);
}
.thanks__next ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.thanks__next li { margin: 0; }
/* são a lista inteira de próximos passos, não links no meio de frase: no
   celular, o piso de toque de 44px (tinham 26) — TRED-141 */
@media (max-width: 1060px) {
  .thanks__next a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ------------------------------------------------------------
   18.6 RESPONSIVO das páginas de conversão
   ------------------------------------------------------------ */

@media (max-width: 1060px) {
}

@media (max-width: 760px) {
  .svc-index__row { grid-template-columns: 1fr; gap: var(--space-2); padding: var(--space-5) 0; }
  .cmp-foot { flex-direction: column; align-items: flex-start; }
  .cmp-foot .btn { width: 100%; justify-content: center; }
  .cmp-table th, .cmp-table td { padding: 10px 12px; }
  .cmp-table th[scope="row"], .cmp-table__corner { min-width: 122px; }
  .cmp-tier { min-width: 116px; }
  .cmp-tier__note { display: none; }
}

/* ============================================================
   19. PÁGINAS DE PROVA (showcase × 3 · about)
   ------------------------------------------------------------
   Fase 2 do plano. Mesmo invólucro do bloco 15.
   ============================================================ */

/* ------------------------------------------------------------
   19.1 SHOWCASE — as três galerias
   ------------------------------------------------------------
   Um só bloco de CSS serve /websites/, /social-media-management/
   e /virtual-tour/. Colunas e proporção do card chegam como custom
   properties inline, do dado — uma galeria futura de 5 colunas não
   deveria pedir CSS novo.
   ------------------------------------------------------------ */

.showcase-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--sc-cols, 3), minmax(0, 1fr));
  gap: var(--space-6);
}
.showcase-item { margin: 0; }

.showcase-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.showcase-card__media {
  position: relative;
  aspect-ratio: var(--sc-ratio, 16 / 10);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base);
}
.showcase-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}

/* O selo de "abre em nova aba" só existe onde há para onde ir, e só
   aparece na intenção — no repouso ele seria 15 setas competindo com
   15 imagens. */
.showcase-card__go {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  background: var(--brand-primary);
  color: var(--white);
  opacity: 0;
  transform: translateY(-6px) scale(.92);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.showcase-card:hover .showcase-card__media,
.showcase-card:focus-visible .showcase-card__media {
  transform: translateY(-3px);
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-lg);
}
.showcase-card:hover .showcase-card__media img { transform: scale(1.03); }
.showcase-card:hover .showcase-card__go,
.showcase-card:focus-visible .showcase-card__go { opacity: 1; transform: translateY(0) scale(1); }

/* O card inteiro é o link: o anel de foco precisa cercar o card, não
   a linha de texto. */
.showcase-card:focus-visible { outline: none; }
.showcase-card:focus-visible .showcase-card__media { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

.showcase-card__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding-top: var(--space-4); }
.showcase-card__name {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  transition: color var(--dur-base);
}
.showcase-card:hover .showcase-card__name { color: var(--brand-primary); }
.showcase-card__tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
/* O resultado numérico é o argumento — quando existe, ele é a coisa
   mais forte da linha depois do nome. */
.showcase-card__stat {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-accent-soft);
  color: var(--brand-primary-deep);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}

/* ------------------------------------------------------------
   19.2 ABOUT
   ------------------------------------------------------------ */

.about-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--space-9);
  align-items: start;
}
.about-story__p { color: var(--text-body); font-size: var(--text-lg); line-height: var(--leading-relaxed); margin: var(--space-5) 0 0; max-width: 60ch; }

.about-promises {
  list-style: none;
  margin: 0;
  padding: var(--space-7) var(--space-6);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.about-promises li { display: flex; gap: 12px; align-items: flex-start; margin: 0; color: var(--text-body); font-weight: var(--weight-medium); line-height: 1.4; }
.about-promises svg { flex: none; margin-top: 1px; color: var(--brand-primary); }

/* Faixa escura: separa a história do time e dá aos números peso de
   argumento, não de nota de rodapé. */
.about-numbers { background: var(--site-dark); color: var(--white); }
.about-numbers__grid {
  margin: 0;
  padding: clamp(48px, 6vw, 76px) 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
}
.about-number { text-align: center; }
.about-number__value {
  font-family: var(--font-display);
  font-size: clamp(52px, 6.4vw, 88px);
  line-height: .9;
  letter-spacing: .01em;
  color: var(--brand-accent-bright);
  font-variant-numeric: tabular-nums;
}
.about-number__label {
  margin: var(--space-3) auto 0;
  max-width: 20ch;
  font-size: var(--text-sm);
  line-height: 1.35;
  color: var(--on-dark-muted);
  text-wrap: balance;
}

.about-team__lead { margin: var(--space-5) 0 0; max-width: 42ch; font-size: var(--title-lead-l); font-weight: var(--weight-medium); line-height: 1.35; color: var(--text-muted); }

/* — O time em tiras —
   Porte do bloco "Team 5" da Watermelon UI (MIT), reescrito sem React nem
   Tailwind. Oito tiras verticais iguais, em monocromo com tinta roxa; a
   que recebe o mouse (ou o foco, ou o toque) abre para 3×, ganha cor e
   revela cargo e nome. A mão do visitante é o que "acende" a pessoa — o
   mesmo argumento da sala roxa em que o trabalho do cliente é a luz.

   Cargo e nome ficam no DOM sempre (só a opacidade muda): leitor de tela
   lê os oito. A tira é um <button> com aria-expanded para o toque e para
   o Tab; o foco abre por `:has(:focus-visible)`, e não por `:focus-within`,
   para o clique do mouse não deixar a tira presa aberta depois de fechar. */
.team-strips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
  height: clamp(320px, 30vw, 440px);
}
.team-strip {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-sunken);
  box-shadow: var(--shadow-xs);
  transition: flex-grow 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.team-strip:hover,
.team-strip:has(.team-strip__hit:focus-visible),
.team-strip.is-open { flex-grow: 3; box-shadow: var(--shadow-lg); }

.team-strip__hit {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* O anel numa camada própria, ACIMA da foto, da tinta, do véu e do texto
   (todos `absolute` dentro do botão): no próprio botão ele era pintado por
   baixo deles e não aparecia nunca — o foco só se via porque a tira abre
   (TRED-141). Branco por dentro do anel, para ler sobre a foto. O contorno
   transparente é o que o alto contraste do Windows pinta (lá não há sombra). */
.team-strip__hit:focus-visible { outline: 3px solid transparent; outline-offset: -3px; }
.team-strip__hit::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius-lg);
  pointer-events: none;
}
.team-strip__hit:focus-visible::after { box-shadow: inset 0 0 0 3px var(--focus-ring), inset 0 0 0 5px var(--white); }

.team-strip__hit img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
  filter: grayscale(1);
  transition: filter 0.5s var(--ease-out);
}
/* Tinta roxa sobre o monocromo: em repouso a tira é da marca, não cinza. */
.team-strip__tint {
  position: absolute;
  inset: 0;
  background: var(--brand-primary);
  mix-blend-mode: multiply;
  opacity: 0.32;
  transition: opacity 0.5s var(--ease-out);
}
.team-strip__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 10, 33, 0.88) 0%, rgba(20, 10, 33, 0.25) 50%, transparent 78%);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.team-strip__meta {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: var(--space-5);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s var(--ease-out) 0.1s, transform 0.3s var(--ease-out) 0.1s;
}
.team-strip__role {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--brand-primary-deep);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  white-space: nowrap;
}
.team-strip__name {
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
  color: var(--white);
  white-space: nowrap;
}
.team-strip:hover .team-strip__hit img,
.team-strip:has(.team-strip__hit:focus-visible) .team-strip__hit img,
.team-strip.is-open .team-strip__hit img { filter: grayscale(0); }
.team-strip:hover .team-strip__tint,
.team-strip:has(.team-strip__hit:focus-visible) .team-strip__tint,
.team-strip.is-open .team-strip__tint { opacity: 0; }
.team-strip:hover .team-strip__veil,
.team-strip:has(.team-strip__hit:focus-visible) .team-strip__veil,
.team-strip.is-open .team-strip__veil { opacity: 1; }
.team-strip:hover .team-strip__meta,
.team-strip:has(.team-strip__hit:focus-visible) .team-strip__meta,
.team-strip.is-open .team-strip__meta { opacity: 1; transform: none; }

/* ------------------------------------------------------------
   19.3 RESPONSIVO das páginas de prova
   ------------------------------------------------------------ */

@media (max-width: 1060px) {
  /* Nunca mais que 3, qualquer que seja o --sc-cols do dado — teto de
     segurança para galeria futura que peça mais colunas no desktop. */
  .showcase-grid { grid-template-columns: repeat(min(var(--sc-cols, 3), 3), minmax(0, 1fr)); gap: var(--space-5); }
  .about-story__grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .about-numbers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--space-5); }
  .team-strips { height: 360px; gap: 6px; }
}
/* Entre 761 e 1250 a tira aberta é mais estreita que "Photographer & Video
   Maker" ou que um nome inteiro, e o `nowrap` cortava até 100px de texto
   (TRED-141; vale para tablet e para 125–150% de zoom num 1366). Ali o
   cargo e o nome quebram linha; fora dessa faixa eles cabem numa só. */
@media (min-width: 761px) and (max-width: 1250px) {
  .team-strip__role,
  .team-strip__name { white-space: normal; text-wrap: balance; }
}

@media (max-width: 760px) {
  .showcase-grid { grid-template-columns: repeat(min(var(--sc-cols, 2), 2), minmax(0, 1fr)); }
  /* Tiras em coluna: oito faixas de 45px de largura não mostram rosto
     nenhum. Deitadas, a fechada mostra os olhos e a aberta vira retrato.
     Altura explícita em vez de flex-grow — em coluna de altura automática
     o flex não tem espaço livre para distribuir. */
  .team-strips { flex-direction: column; height: auto; gap: 6px; }
  .team-strip { flex: none; height: 72px; transition: height 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out); }
  .team-strip:hover,
  .team-strip:has(.team-strip__hit:focus-visible),
  .team-strip.is-open { flex-grow: 0; height: 300px; }
  .team-strip__hit img { object-position: center 30%; }
  .team-strip__meta { padding: var(--space-4); }
  /* O selo de link fica visível: em toque não existe hover, e sem ele
     não há como saber que o card leva a algum lugar. */
  .showcase-card__go { opacity: 1; transform: none; width: 32px; height: 32px; }
  .showcase-card__stat { margin-left: 0; }
}

@media (max-width: 480px) {
  .showcase-grid { grid-template-columns: 1fr; }
  .about-numbers__grid { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* ============================================================
   20. PÁGINAS DE APOIO (blog · post · links)
   ------------------------------------------------------------
   Fase 3 do plano.
   ============================================================ */

/* ------------------------------------------------------------
   20.2 BLOG — listagem
   ------------------------------------------------------------ */

.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-7) var(--space-6);
}
.post-item { margin: 0; }

/* Reescreve o card do bloco 15, que era o esqueleto provisório. */
.post-card {
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
  height: 100%;
}
.post-card:hover { transform: none; box-shadow: none; }

.post-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }

.post-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base);
}
.post-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); }

/* Sem imagem destacada: um bloco de marca, não um placeholder cinza
   com ícone — que é pior que a ausência. */
.post-card__fallback {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, var(--purple-500) 0%, var(--purple-900) 100%);
}

.post-card__link:hover .post-card__media,
.post-card__link:focus-visible .post-card__media {
  transform: translateY(-3px);
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-lg);
}
.post-card__link:hover .post-card__media img { transform: scale(1.03); }
.post-card__link:focus-visible { outline: none; }
.post-card__link:focus-visible .post-card__media { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

.post-card__body { padding-top: var(--space-4); }
.post-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: var(--space-2); }
.post-card__meta time,
.post-card__cat {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  /* `--neutral-600`, não o `--text-muted`: a 12px o cinza dava 4,4:1 sobre o
     fundo dos cards nas listas de categoria e de busca (TRED-141) */
  color: var(--neutral-600);
}
.post-card__cat { color: var(--brand-primary); }
.post-card__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  line-height: 1.25;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  text-wrap: balance;
  transition: color var(--dur-base);
}
.post-card__link:hover .post-card__title { color: var(--brand-primary); }
.post-card__excerpt { margin: 0; color: var(--text-body); font-size: var(--text-sm); line-height: var(--leading-normal); }

.blog-empty { max-width: 52ch; }
.blog-empty h2 { font-size: var(--text-h3); font-weight: var(--weight-bold); color: var(--text-strong); margin: 0 0 var(--space-3); }
.blog-empty p { margin: 0; color: var(--text-muted); }
.blog-empty a { color: var(--text-link); font-weight: var(--weight-semibold); }

/* Paginação — o WordPress emite `.navigation.pagination` com
   `.nav-links` dentro; o nome colide com a nav do header, então as
   regras abaixo são sempre ancoradas em `.pagination`. */
.pagination { margin-top: var(--space-9); }
.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
  border-radius: 0;
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  color: var(--text-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: border-color var(--dur-base), color var(--dur-base), background var(--dur-base);
}
.pagination .page-numbers:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.pagination .page-numbers.current { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--white); }
.pagination .page-numbers.dots { border-color: transparent; background: none; }

/* ------------------------------------------------------------
   20.3 POST
   ------------------------------------------------------------ */

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: var(--space-6) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.post-meta__cat { color: var(--brand-primary); text-decoration: none; }
/* alvo mínimo da WCAG 2.5.8 também no desktop: a etiqueta tinha 17px de
   altura (no celular o piso de 44 já vinha do bloco de toque, no fim) */
.post-meta__cat { display: inline-flex; align-items: center; min-height: 24px; }
.post-meta__cat:hover { text-decoration: underline; text-underline-offset: 3px; }
.post-meta__read { margin-left: auto; }

.post-hero-img { margin: var(--space-6) 0 0; }
.post-hero-img img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); }
.post-hero-img figcaption { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); }

.post-nav { border-top: 1px solid var(--border-subtle); }
.post-nav__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  padding: var(--space-8) var(--container-pad);
}
.post-nav__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  text-decoration: none;
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.post-nav__item:hover { border-color: var(--brand-primary); box-shadow: var(--shadow-sm); }
/* Sozinho, o "Next" vai para a direita em vez de deixar um buraco. */
.post-nav__item--next { grid-column: 2; text-align: right; }
.post-nav__item--next:only-child { grid-column: 2; }
.post-nav__dir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.post-nav__item--next .post-nav__dir { justify-content: flex-end; }
.post-nav__title { font-size: var(--text-base); font-weight: var(--weight-bold); line-height: 1.3; color: var(--text-strong); }

/* ------------------------------------------------------------
   20.4 LINKS — link-in-bio, sem header nem rodapé
   ------------------------------------------------------------
   Página de celular por definição: chega da bio do Instagram. Alvo de
   toque grande, uma coluna, nada acima da dobra que não seja marca ou
   link.
   ------------------------------------------------------------ */

.links-page { background: var(--site-dark); }
.links {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 7vw, 64px) 20px;
  background:
    radial-gradient(60% 42% at 50% 0%, rgba(98, 39, 155, .42) 0%, transparent 72%),
    var(--site-dark);
}
.links__inner { width: 100%; max-width: 480px; }

.links__head { text-align: center; margin-bottom: var(--space-7); }
.links__logo { width: 190px; height: auto; margin: 0 auto var(--space-5); display: block; }
.links__head h1 {
  font-size: clamp(24px, 6vw, 30px);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  color: var(--white);
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}
.links__head p { margin: 0 auto; max-width: 40ch; color: var(--on-dark-muted); font-size: var(--text-sm); line-height: var(--leading-normal); }

.links__list { display: flex; flex-direction: column; gap: 10px; }
.links__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label arrow" "note arrow";
  align-items: center;
  gap: 2px 14px;
  padding: 15px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  text-decoration: none;
  transition: background var(--dur-base), border-color var(--dur-base), transform var(--dur-base) var(--ease-out);
}
.links__item:hover { background: rgba(255, 255, 255, 0.11); border-color: rgba(255, 255, 255, 0.28); transform: translateY(-2px); }
.links__item:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

/* Um único botão cheio: dois primários numa lista de oito é nenhum. */
.links__item--primary { background: var(--brand-primary); border-color: var(--brand-primary); }
.links__item--primary:hover { background: var(--purple-400); border-color: var(--purple-400); }

.links__label { grid-area: label; color: var(--white); font-weight: var(--weight-bold); font-size: var(--text-base); line-height: 1.25; }
.links__note { grid-area: note; color: var(--on-dark-muted); font-size: var(--text-xs); line-height: 1.3; }
.links__item--primary .links__note { color: rgba(255, 255, 255, 0.82); }
/* no hover o fundo clareia para o `--purple-400` e a nota a 82% caía a 4,2:1:
   ali ela vai a branco cheio (5,4:1) — TRED-141 */
.links__item--primary:hover .links__note { color: var(--white); }
.links__arrow { grid-area: arrow; color: rgba(255, 255, 255, 0.55); transition: transform var(--dur-base) var(--ease-out), color var(--dur-base); }
.links__item:hover .links__arrow { transform: translateX(3px); color: var(--white); }
.links__item--primary .links__arrow { color: rgba(255, 255, 255, 0.85); }

.links__social { display: flex; justify-content: center; gap: 8px; margin: var(--space-7) 0 var(--space-6); }
.links__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.75);
  transition: color var(--dur-base), border-color var(--dur-base), background var(--dur-base);
}
.links__social a:hover { color: var(--white); border-color: var(--brand-accent); background: rgba(22, 185, 193, 0.12); }
.links__social a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

.links__foot { text-align: center; display: flex; flex-direction: column; gap: 6px; font-size: var(--text-xs); color: rgba(255, 255, 255, 0.5); }
.links__foot a { color: var(--on-dark-muted); text-decoration: none; }
.links__foot a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.links__legal { display: flex; justify-content: center; gap: 14px; }

/* ------------------------------------------------------------
   20.5 RESPONSIVO das páginas de apoio
   ------------------------------------------------------------ */

@media (max-width: 1060px) {
  .post-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); }
}

@media (max-width: 760px) {
  .post-list { grid-template-columns: 1fr; }
  .post-meta__read { margin-left: 0; width: 100%; }
  .post-nav__inner { grid-template-columns: 1fr; }
  .post-nav__item--next,
  .post-nav__item--next:only-child { grid-column: 1; text-align: center; }
  .post-nav__item--next .post-nav__dir { justify-content: center; }
}

/* ============================================================
   21. DEALERSHIP PROGRAM (/dealership-program/) + bloco .founder
   ------------------------------------------------------------
   Desde 14/09/2026 a página é montada com as peças da /pricing/ (hero
   da /contact/, pilha e painéis da /services/, coluna lateral e painéis
   lado a lado da /pricing/); o que é só dela vive em `dealership.css`.

   Aqui ficam os três blocos que a página já tinha e continuam nela: o
   fundador (`.founder` / `.creds`), a tabela de salários da conta
   (`.dp-salaries` / `.dp-total` / `.dp-truecost`, agora dentro do
   painel lilás) e a faixa de logos de dealer (`.dp-trusted`). Os
   números, o livro-razão, a grade do time, as rotinas e os dois cards
   da conta saíram — viraram cartões do hero, abas da FAQ, dois painéis
   sticky e dois painéis lado a lado.
   ============================================================ */

/* — o fundador — */

.founder { background: var(--surface-page); border-top: 1px solid var(--border-subtle); }
.founder__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-9);
  align-items: center;
}
.founder__photo {
  aspect-ratio: 4 / 5;
  max-width: 460px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
  background: var(--surface-sunken);
}
.founder__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.founder__name { margin: var(--space-5) 0 var(--space-5); font-size: var(--text-h3); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); color: var(--text-strong); }
.founder__role {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.creds { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-default); }
.creds li {
  margin: 0;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-default);
  display: grid;
  grid-template-columns: minmax(0, 16ch) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: baseline;
}
.creds strong { color: var(--text-strong); line-height: 1.3; }
.creds span { color: var(--text-body); line-height: 1.5; }


/* — a tabela de salários da conta — */

.dp-salaries { margin: 0; display: grid; grid-template-columns: 1fr auto; row-gap: 10px; column-gap: var(--space-5); align-items: baseline; }
.dp-salaries dt { color: var(--text-body); }
/* Hind, não Bebas: salário é dado tabular, e o Manual reserva a Bebas ao
   número grande — que aqui é só o total. */
.dp-salaries dd { margin: 0; text-align: right; font-weight: var(--weight-semibold); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.dp-total {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-default);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  color: var(--text-strong);
}
.dp-total__fig { font-family: var(--font-display); font-size: clamp(32px, 3vw, 44px); line-height: 1; letter-spacing: 0.01em; }
.dp-truecost { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--text-muted); }
.dp-truecost strong { color: var(--text-strong); }

/* — os logos — */

.dp-trusted { background: var(--surface-cream); border-top: 1px solid var(--border-subtle); }
.dp-trusted__inner { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-7) var(--container-pad); }
.dp-trusted p {
  margin: 0;
  flex: none;
  max-width: 18ch;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--text-muted);
}
.dp-trusted ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--space-8); }
.dp-trusted li { margin: 0; }
.dp-trusted img { display: block; max-height: 44px; width: auto; height: auto; }

/* — responsivo — */

@media (max-width: 1060px) {
  .founder__grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .founder__photo { max-width: 360px; }
  .dp-trusted__inner { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
}

@media (max-width: 760px) {
  .creds li { grid-template-columns: 1fr; gap: 2px; }
}

/* — leitura no celular (15/09/2026): o resumo do card do blog subia de
   14 para 16px. Fica no fim do arquivo de propósito — a regra base está
   na seção 20, e em igualdade de especificidade quem vem depois ganha. — */
@media (max-width: 1060px) {
  .post-card__excerpt { font-size: var(--text-base); }
}

/* — /links/ (15/09/2026): o subtítulo caía a 14px e o link do rodapé
   tinha 17px de alvo. A página é de celular por definição, então sem
   media query. E o chip de categoria do post (17px) sobe a 44 no toque. — */
.links__head p { font-size: var(--text-base); }
.links__foot a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 1060px) {
  .post-meta__cat { display: inline-flex; align-items: center; min-height: 44px; }
  /* a migalha fica em 36, não 44: é linha de texto miúdo, e 44 inflaria a
     trilha sem ganho de acerto. Aqui no fim porque a regra base (seção 15)
     tem a mesma especificidade e venceria se esta viesse antes. */
  .breadcrumb a, .breadcrumb [aria-current] { min-height: 36px; }
}

/* ==========================================================================
   Celular: tudo centrado (01/10/2026, a pedido — TRED-132)
   --------------------------------------------------------------------------
   Abaixo de 760 o site inteiro alinha ao centro: cabeças, apoio, números,
   cards, painéis, respostas e rodapé. Duas exceções, e são de leitura, não
   de gosto: o campo de formulário (o texto digitado nasce na borda) e o
   corpo de documento — política, termos, artigo —, onde parágrafo e lista
   centrados por várias telas não se leem.

   O `text-align` resolve o texto; o resto são caixas que se encolhem e
   ficavam presas à esquerda (flex com `flex-start`, medidas em `ch` sem
   `margin: auto`). Fica no fim do arquivo pela especificidade; o que é de
   uma página só mora na folha dela, que carrega depois desta.
   ========================================================================== */
@media (max-width: 760px) {
  main,
  .site-footer,
  .flip-card { text-align: center; }
  main :is(input:not([type="submit"], [type="button"]), select, textarea),
  .entry-content { text-align: left; }

  /* medidas de leitura: a caixa estreita vai para o meio junto com o texto */
  .hero-lede,
  .sec-head,
  .faq2__intro,
  .thanks__inner,
  .footer-brand p { margin-inline: auto; }

  /* caixas que se encolhem */
  .page-hero__inner,
  .team-strip__meta,
  .thanks__next ul,
  .footer-contact { align-items: center; }
  .breadcrumb ol,
  .svc-tags,
  .btn-row,
  .post-card__meta,
  .post-meta,
  .footer-col a,
  .footer-social,
  .footer-legal { justify-content: center; }
  .showcase-card__meta,
  .dp-trusted ul { justify-content: center; }
  .dp-trusted__inner { align-items: center; }
  .footer-brand img { margin-inline: auto; }
  /* a tabela de salários é livro-razão (função à esquerda, valor à
     direita): centrar a função tira a coluna de leitura */
  .dp-salaries dt { text-align: left; }
  .footer-social { margin-left: 0; }
  .post-meta__read { margin-left: 0; }

  /* Acordeões: o sinal sai da conta. Com ele no fluxo, o título centrava
     no espaço que sobrava à esquerda do "+" e caía uns 20px fora do eixo
     da página. Absoluto à direita, com o mesmo respiro dos dois lados. */
  .svc-title {
    position: relative;
    justify-content: center;
    text-align: center;
    padding-inline: 40px;
  }
  .svc-title__sign {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -0.5em;
  }
  /* FAQ: o número e a seta saem da conta, um em cada borda, e a pergunta
     centra entre os dois */
  .faq2__btn {
    position: relative;
    display: block;
    padding-inline: 2.75rem;
    text-align: center;
  }
  .faq2__btn { padding-block: var(--space-4); }
  .faq2__card { margin-left: 0; }
  .faq2__n,
  .faq2__arrow { position: absolute; top: 50%; }
  .faq2__n { left: 0; transform: translateY(-50%); }
  .faq2__arrow { right: 0; margin-top: -0.3125rem; }
}

/* ============================================================
   HEADER A 320px (WCAG 1.4.10, TRED-141)
   ------------------------------------------------------------
   Logo, "Let's talk" e o hambúrguer não cabiam na pílula: nas páginas de
   hero claro o botão do MENU saía da tela (só ~4px à vista) e, nas
   outras, passava 2px da borda — a navegação inteira fora de alcance no
   celular mais estreito. Abaixo de 360 o recuo e o respiro da pílula
   encolhem e o "Let's talk" perde a seta (sobram ~25px). `!important`
   porque a lista de hero claro (início do header) tem especificidade de
   página e venceria; o bloco só vale nesta faixa.
   ============================================================ */
@media (max-width: 360px) {
  .site-header { padding-inline: 12px !important; }
  .site-header .site-header__bar { padding-left: 12px !important; padding-right: 6px !important; }
  .site-header .btn--sm { padding-inline: 12px; }
  .site-header .btn--sm .btn__arrow { display: none; }
}