/* =========================================================
   SITE TIIX — Jones & Brown Legal
   Design tokens extraídos do Figma: d3eWpalhFuu4LaLEIf6FZ6
   ========================================================= */

/* ---------- Outfit (variable font — todos os pesos 100–900) ---------- */
@import url('https://cdn.jsdelivr.net/npm/@fontsource-variable/outfit/index.min.css');

/* ---------- Design Tokens ---------- */
:root {
  /* Colors */
  --color-bg1:      #FFFFFF; /* white — Background 1 (era cream #F7F4EB; trocado p/ branco a pedido do Lucas 2026-07-21) */
  --color-bg2:      #871312; /* TIIX primary red — Nav */
  --color-bg3:      #5A0C0C; /* TIIX dark red — Background 3 / Schedule */
  --color-accent:   #31110F; /* Accent / Button Dark default */
  --color-accent-h: #1F0808; /* Button Dark hover */
  --color-white:    #FFFFFF;
  --color-f2:       #F2F2F2; /* Display 1 / nav text secondary */
  --color-black:    #000000;
  --color-divider:  #E9E9E9;
  --color-carousel: #F6F6F6;

  /* Typography — Outfit */
  --font: 'Outfit Variable', 'Outfit', system-ui, -apple-system, sans-serif;

  /* Text scales */
  --fs-hero:   120px; /* Hero Display */
  --fs-d1:     300px; /* Display 1 */
  --fs-d3:      76px; /* Display 3 */
  --fs-h1:      32px; /* Header 1 */
  --fs-h3:      18px; /* Header 3 / Paragraph 2 / Button */
  --fs-p3:      14px; /* Paragraph 3 */
  --fs-link:    13px; /* Link / Nav */

  /* Line heights */
  --lh-hero: 0.95;
  --lh-d1:   1.09;
  --lh-h1:   1.09;
  --lh-h3:   1.35;
  --lh-btn:  1.2;
  --lh-p3:   1.4;

  /* Letter spacing */
  --ls-hero: -3.6px;
  --ls-d1:  -15px;
  --ls-d3:  -4.56px;
  --ls-h1:  -1.6px;
  --ls-h3:  -0.36px;
  --ls-link: -0.39px;

  /* Layout */
  /* Altura/gutter da nav igualados ao layout do site-tiix-pro (pedido do
     Lucas 2026-07-28): 108px desktop / 84px ≤767px (era 64px fixo), gutter
     lateral 56px/20px (era calculado a partir da largura do logo). Logo em
     si (SVG inline) e o drawer mobile ficam como estavam — só medida. */
  --nav-h:          108px;
  --nav-gutter:     56px;
  --nav-logo-h:     32px;
  --nav-logo-w:     calc(var(--nav-logo-h) * 460 / 248);
  --max-w:        1280px;
  --content-px-desk: 152px;
  --content-px-tab:   64px;
  --content-px-mob:   28px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: var(--font);
  background: var(--color-bg1);
  color: var(--color-black);
  -webkit-font-smoothing: antialiased;
}
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ---------- Page routing ---------- */
.page { display: none; }
.page.active { display: block; }

/* ---------- Brand splash (preload + transições) ---------- */
#brand-splash {
  position: fixed; inset: 0;
  background: var(--color-bg1);
  z-index: 500;
  display: flex; align-items: center; justify-content: center;
}
.brand-splash__logo {
  width: min(42vw, 440px);
  height: auto;
  display: block;
  overflow: visible;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  #brand-splash { display: none !important; }
}

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 100;
  /* Sem cor de fundo aqui: a variante (transparent | glass) define o fundo.
     A barra vermelha sólida foi descartada. */
}
/* Full-bleed: a logo alinha na LATERAL DA TELA (não no container de 1280),
   recuada em "1 logo" de distância da borda. */
.nav__inner {
  max-width: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 var(--nav-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav__logo {
  height: var(--nav-logo-h);
  width: auto;
  display: block;
  overflow: visible;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav__link {
  font-size: var(--fs-link);
  font-weight: 500;
  letter-spacing: var(--ls-link);
  line-height: var(--lh-hero);
  color: var(--color-white);
  opacity: 0.75;
  transition: opacity .2s;
}
.nav__link:hover,
.nav__link.active { opacity: 1; }

/* =========================================================
   VARIANTES DE TOPBAR
   Alterna por URL: ?nav=transparent · ?nav=glass · (padrão = sólida)
   Pesquisa: p/ site vanilla não se usa lib — o padrão é o CSS nativo
   `backdrop-filter`. Prefixo -webkit- é obrigatório (senão Safari não
   renderiza blur nenhum).
   ========================================================= */

/* A) TRANSPARENTE — sem cor de fundo.
      Scrim (preto→transparente) só p/ garantir leitura do texto branco
      sobre trechos claros do vídeo. Sem scrim o texto some no hero claro. */
.nav--transparent {
  background: transparent;
}
.nav--transparent::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0));
  pointer-events: none;
}

/* B) GLASS — receita canônica (4 propriedades):
      1. backdrop-filter blur + saturate  → o vidro fosco
      2. background rgba alpha baixo      → a tinta translúcida (marca)
      3. borda translúcida                → aresta que "pega" a luz
      4. box-shadow                       → profundidade/elevação        */
.nav--glass {
  background: rgba(135, 19, 18, 0.28);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
/* Fallback: navegador sem backdrop-filter → vidro vira sólido translúcido
   (senão a barra fica quase invisível e o texto branco some). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav--glass { background: rgba(135, 19, 18, 0.92); }
}

/* C) TINTA VERMELHA — só no Começar agora (main.js toggla .nav--red pela
   página ativa): o hero é claro (creme) e o texto/logo brancos sumiam.
   NÃO é fundo vermelho (Lucas corrigiu): a barra segue transparente, só a
   FONTE e a LOGO viram vermelho tiix. O scrim escuro da variante
   transparent também sai (feito pra texto branco, suja o hero claro). */
.nav--red::before { content: none; }
.nav--red .nav__link { color: var(--color-bg2); }
.nav--red .nav__logo path,
.nav--red .nav__logo g { fill: var(--color-bg2); }

/* =========================================================
   NAV MOBILE — hambúrguer (mobile <768 + tablet 768–1023, ver
   CONTEXTO.md §4). Sem isso os 4 links espremiam contra a logo
   e quebravam em até 3 linhas abaixo de ~1000px (bug relatado
   2026-07-20). Ícone de 2 barras + dropdown ancorado (2026-07-28,
   espelhando o menu do site-tiix-pro) — era gaveta lateral full-height.
   O dropdown usa fundo escuro translúcido SEMPRE — por isso o link é
   forçado a branco mesmo em .nav--red (que na barra usa --color-bg2 pro
   contraste com o hero claro). */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1;
}
.nav__toggle:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}
.nav__toggle-bar {
  display: block;
  width: 24px;
  height: 1.5px;
  margin: 6px 0;
  background: var(--color-white);
  transition: transform .16s ease;
  /* Achado do Lucas 2026-07-28 ("hambúrguer sumiu"): .nav__toggle é
     flex-direction:column, e min-height:auto (padrão de item flex) deixa
     essas barras encolharem pra ALTURA ZERO — a área útil do botão
     (44px - 10px×2 de padding = 24px) é 3px menor que o que as 2 barras +
     margens pedem (27px), e sem flex-shrink:0 o flexbox resolve esse
     estouro encolhendo o flex-basis (altura) até 0 em vez de dar overflow. */
  flex-shrink: 0;
}
.nav--red .nav__toggle-bar { background: var(--color-bg2); }
.nav--menu-open .nav__toggle-bar:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav--menu-open .nav__toggle-bar:last-child { transform: translateY(-3.75px) rotate(-45deg); }

/* Sem scrim (pedido do Lucas 2026-07-28, espelhando o menu do
   site-tiix-pro): o dropdown ali embaixo não escurece o resto da página —
   o elemento continua no DOM/JS (initNavMobileMenu segue alternando
   .is-visible), só não aparece mais. */
.nav__scrim { display: none; }

body.nav-menu-locked { overflow: hidden; }

/* Mesmo breakpoint do site-tiix-pro pra essa medida (108px→84px, 56px→20px
   de gutter) — diferente do breakpoint de 1023px do hambúrguer aqui embaixo
   (esse é sobre CABER os 4 links, não sobre a altura da barra). */
@media (max-width: 767px) {
  :root {
    --nav-h: 84px;
    --nav-gutter: 20px;
  }
}

@media (max-width: 1023px) {
  .nav__toggle { display: flex; }

  /* Dropdown ancorado (pedido do Lucas 2026-07-28, espelhando o menu do
     site-tiix-pro) — era gaveta lateral full-height com scrim; agora é um
     painel compacto que "cai" logo abaixo da barra, sem escurecer o resto
     da página. `top:72px` é o mesmo valor do pro — funciona igual aqui
     porque a altura da barra mobile (`--nav-h`) já foi igualada a 84px. */
  .nav__links {
    position: absolute;
    top: 72px;
    left: var(--nav-gutter);
    right: var(--nav-gutter);
    display: grid;
    gap: 0;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    background: rgba(25, 8, 8, 0.9);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
    z-index: 95;
  }
  .nav--menu-open .nav__links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav__link {
    display: flex;
    align-items: center;
    min-height: 44px;
    width: 100%;
    padding: 12px;
    font-size: 14px;
    letter-spacing: var(--ls-link);
    color: var(--color-white);
    opacity: 1;
  }
  /* Texto sempre branco no dropdown (fundo escuro fixo), mesmo nas páginas
     que usam a tinta vermelha na barra (.nav--red). Especificidade (0,2,0)
     bate a base .nav--red .nav__link (0,2,0) por vir depois no arquivo. */
  .nav--red .nav__links .nav__link { color: var(--color-white); }
}

/* ---------- Nav flutuante: conteúdo passa POR BAIXO ----------
   Não há spacer. Com padding-top aqui, a faixa de 64px sob a nav mostrava
   o fundo cream do body ("barra branca" acima do vídeo) em vez do vídeo. */
.site-content { padding-top: 0; }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-block;
  font-family: var(--font);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh-btn);
  letter-spacing: var(--ls-h3);
  padding: 18px 24px;
  border-radius: 500px;
  transition: background .2s, color .2s;
  cursor: pointer;
  border: none;
}
.btn--dark {
  background: var(--color-accent);
  color: var(--color-white);
}
.btn--dark:hover { background: var(--color-accent-h); }
.btn--light {
  background: var(--color-white);
  color: var(--color-accent);
}
.btn--light:hover { background: var(--color-f2); }
.btn--outline {
  background: var(--color-bg1);
  color: var(--color-bg2);
  border: 2px solid var(--color-bg2);
  transition: background .2s, color .2s, border-color .2s;
}
.btn--outline:hover { background: var(--color-bg2); color: var(--color-white); }

/* =========================================================
   HOME — HERO
   ========================================================= */
.hero {
  position: relative;
}
.hero__bg {
  display: block;
  width: 100%;
  height: auto;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.40);
}
.hero__content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  text-align: right;
  max-width: 100%;
  padding: 0 var(--content-px-desk) 72px;
  gap: 24px;
}
.hero__eyebrow {
  font-size: var(--fs-p3);
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.hero__title {
  font-size: 64px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -2px;
  color: var(--color-white);
  max-width: 760px;
}
.hero__body {
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: var(--lh-h3);
  color: rgba(255,255,255,0.70);
  max-width: 480px;
}

/* =========================================================
   WELCOME
   ========================================================= */
.welcome {
  background: var(--color-bg1);
  padding: 96px 0;
}
.welcome__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--content-px-desk);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.welcome__title {
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--color-black);
  grid-column: 1 / -1;
}
.welcome__body {
  display: contents;
}
.welcome__text {
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-black);
}
.welcome__inner .btn {
  grid-column: 1 / -1;
}

/* =========================================================
/* =========================================================
   SPLIT HERO — "Tiix conecta." (pin + vídeo crescendo no meio)
   ========================================================= */
.split-hero {
  position: relative;
  background: var(--color-bg2);
}
.split-hero__pin {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.split-hero__title {
  display: flex;
  align-items: baseline;
  gap: 0.18em;
  font-size: clamp(56px, 10vw, 150px);
  line-height: 1;
  white-space: nowrap;
  width: fit-content;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.split-hero__w1 { font-weight: 600; color: var(--color-white); display: inline-flex; }
.split-hero__w2 { font-weight: 300; font-style: italic; color: #D2AE6D; }
/* Logo no lugar de "Tiix": altura casada com o corpo da tipografia e alinhada
   pela base, p/ ficar na mesma linha do "conecta.". viewBox agora é CROPADO no
   fim dos glifos (ver index.html) — sem o padding vazio embaixo, então a base
   caiu ~5px; o margin-bottom subiu de 0.06em→0.1em pra recolocar a logo na
   linha do "conecta." no estado inicial (o "saúde" no estado final é
   posicionado por JS relativo à logo, não depende disto). */
.split-hero__logo {
  height: 0.78em;
  width: auto;
  display: block;
  align-self: flex-end;
  margin-bottom: 0.06em;
  /* Com o viewBox cropado a base da logo caiu ~0.04em vs "conecta." no estado
     inicial. margin não corrige (flex-end de altura automática só cresce o
     container), então sobe-se por transform — escala em em e não conflita com
     o GSAP, que anima o SPAN pai (.split-hero__w1), não este SVG. */
  transform: translateY(-0.04em);
}
.split-hero__media {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  /* Momento zero = INVISÍVEL (pedido do Lucas): a foto só "abre" quando o
     usuário mexe no scroll — splitHero() (motion.js) cresce daqui até
     100vw/100vh. Era 160×96 (miolo visível parado), o que fazia a foto
     aparecer antes de qualquer interação. */
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: 1;
}
.split-hero__media video,
.split-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.split-hero__phrase {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  font-size: clamp(24px, 3vw, 44px);
  font-weight: 300;
  color: var(--color-white);
  text-align: center;
  padding: 0 var(--content-px-desk);
  pointer-events: none;
}
.split-hero__phrase em { font-style: italic; color: #D2AE6D; margin-left: 0.3em; }

/* "saúde" — fase 4 do split-hero: palavra letra a letra sobre fundo creme.
   Tipografia de contraste (serif fina) vs. Outfit do restante do site.
   GSAP controla a entrada de cada .sh-letter via stagger no scrub. */
.split-hero__word {
  position: absolute;
  top: 56%;
  left: 0; right: 0;
  text-align: center;
  z-index: 3;
  pointer-events: none;
  font-family: var(--font);
  font-size: clamp(84px, 14vw, 210px);
  font-weight: 300;
  font-style: normal;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #D2AE6D;
}
.sh-letter {
  display: inline-block;
}

/* fallback sem JS/motion: estático e apresentável */
@media (prefers-reduced-motion: reduce) {
  .split-hero__pin { height: auto; padding: 96px 0; flex-direction: column; gap: 40px; }
  .split-hero__media { position: static; transform: none; width: 100%; height: 480px; }
  /* phrase sobrepõe a base da foto via gradiente — "bottom: 96px" = base do pin =
     base da imagem (o pin tem 96px de padding-bottom, a imagem é o último flex item) */
  .split-hero__phrase {
    position: absolute;
    top: auto; left: 0; right: 0; bottom: 96px;
    height: 140px;
    display: flex; align-items: flex-end;
    background: linear-gradient(transparent, rgba(135,19,18,0.85));
    padding: 0 var(--content-px-desk) 32px;
    opacity: 1;
  }
}
/* mobile/tablet: motion.js não cria o pin (gate de largura, P0 backlog) —
   mesmo fallback estático de reduced-motion, pra não sobrar o layout "pinado"
   sem JS pra mover as peças. */
@media (max-width: 1023px) {
  .split-hero__pin { height: auto; padding: 96px 0; flex-direction: column; gap: 40px; }
  .split-hero__media { position: static; transform: none; width: 100%; height: 480px; }
  .split-hero__phrase {
    position: absolute;
    top: auto; left: 0; right: 0; bottom: 96px;
    height: 140px;
    display: flex; align-items: flex-end;
    background: linear-gradient(transparent, rgba(135,19,18,0.85));
    padding: 0 var(--content-px-desk) 32px;
    opacity: 1;
  }
}

/* =========================================================
   MEDIA BANNERS (imagem/vídeo full-bleed, expandem no scroll)
   ========================================================= */
.media-banner {
  position: relative;
  height: 625px;
  overflow: hidden;
}
.media-banner__media,
.media-banner video,
.media-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.js-banner { will-change: clip-path; }

/* =========================================================
   IMAGE BREAKER
   ========================================================= */
.img-breaker {
  height: 625px;
  overflow: hidden;
}
.img-breaker img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   OFFERING
   ========================================================= */
.offering {
  background: var(--color-bg2);
  padding: 96px 0;
}
.offering__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--content-px-desk);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
}
.offering__label {
  font-size: var(--fs-p3);
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.50);
}
.offering__list {}
.offering__items {
  margin-bottom: 48px;
}
.offering__item {
  font-size: var(--fs-d3);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: var(--ls-d3);
  text-transform: capitalize;
  border-top: 1px solid rgba(255,255,255,0.15);
  padding: 16px 0;
}
.offering__item:last-child { border-bottom: 1px solid rgba(255,255,255,0.15); }
.offering__item a {
  color: var(--color-white);
  display: inline-block;
  transition: opacity .25s, transform .35s cubic-bezier(.22,.61,.36,1);
}
.offering__item a:hover { opacity: 0.7; transform: translateX(12px); }
.offering__item--more a { color: #FFF0C4; opacity: 0.5; }
.offering__item--more a:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .offering__item a:hover { transform: none; }
}

/* =========================================================
   CLIENTS / CAROUSEL
   ========================================================= */
.clients {
  background: var(--color-bg1);
  padding: 96px 0;
}
.clients__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--content-px-desk);
}
.clients__title {
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--color-black);
  margin-bottom: 16px;
}
.clients__subtitle {
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-black);
  margin-bottom: 48px;
  max-width: 640px;
}
.carousel {
  background: var(--color-carousel);
  padding: 40px;
  margin-bottom: 48px;
  min-height: 200px;
}
.carousel__slides { position: relative; }
.carousel__slide { display: none; }
.carousel__slide.active { display: block; }
.carousel__quote {
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--color-black);
  margin-bottom: 24px;
}
.carousel__author {
  font-size: var(--fs-p3);
  font-weight: 400;
  line-height: var(--lh-p3);
  color: var(--color-black);
  opacity: 0.60;
}
.carousel__nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}
.carousel__dots { display: flex; gap: 8px; }
.carousel__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--color-divider);
  cursor: pointer;
  transition: background .2s;
}
.carousel__dot.active { background: var(--color-black); }
.clients__outro {
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-black);
  margin-bottom: 32px;
  max-width: 640px;
}
.clients__cta {}

/* =========================================================
   IMAGE DIVIDER
   ========================================================= */
.img-divider {
  position: relative;
  height: 625px;
  overflow: hidden;
}
.img-divider img { width: 100%; height: 100%; object-fit: cover; }
.img-divider__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.20);
}

/* =========================================================
   FOOTER
   ========================================================= */
/* Footer ENXUTO (2026-07-15): só o copyright — as infos saíram e o fim de
   página é da gaveta #footer-cta. As classes __header/__tagline/__contact
   seguem no CSS por ora (markup não as usa mais). */
.footer {
  background: var(--color-bg1);
  padding: 28px 0;
  border-top: 1px solid var(--color-divider);
}

/* ===== CTA FOOTER DUPLO — barra "peek" sobe perto do fim; gaveta completa
   só expande no hover/clique da barra (ver footerCtaDrawer(), js/motion.js) ===== */
#footer-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90; /* abaixo da nav (100) e do splash */
  height: clamp(520px, 50.8vw, 820px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--color-bg2);
  box-shadow: 0 -18px 50px rgba(0,0,0,.12);
  transform: translateY(100%); /* nasce escondida; motion.js revela (peek/expanded) */
}
#footer-cta[hidden],
#footer-cta.is-disabled { display: none; }
.footer-cta__peek {
  flex: 0 0 var(--footer-cta-peek-h, 52px);
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-bottom: 1px solid rgba(255,255,255,.14);
  background: var(--color-bg1); color: #fff;
  font-family: var(--font); font-weight: 700; font-size: .8rem;
  letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer;
}
.footer-cta__peek-chevron { width: 15px; height: 15px; transition: transform .3s ease; flex: none; }
.footer-cta__peek[aria-expanded="true"] .footer-cta__peek-chevron { transform: rotate(180deg); }
.footer-cta__frame {
  flex: 1 1 auto;
  width: 100%;
  display: block;
  border: 0;
  background: var(--color-bg2);
}
.footer__header {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--content-px-desk);
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.footer__logo {
  height: 32px;
  width: auto;
  object-fit: contain;
}
.footer__brand {
  font-size: var(--fs-h1);
  font-weight: 500;
  letter-spacing: var(--ls-h1);
  color: var(--color-black);
}
.footer__tagline {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--content-px-desk);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-black);
  margin-bottom: 48px;
}
.footer__contact {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--content-px-desk);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 48px;
}
.footer__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer__col-item {
  font-size: var(--fs-p3);
  font-weight: 400;
  line-height: var(--lh-p3);
  color: var(--color-black);
}
.footer__social a {
  font-size: var(--fs-p3);
  font-weight: 400;
  line-height: var(--lh-p3);
  color: var(--color-black);
  display: block;
}
.footer__copyright {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--content-px-desk);
  font-size: var(--fs-p3);
  font-weight: 400;
  color: var(--color-black);
  opacity: 0.50;
  border-top: 1px solid var(--color-divider);
  padding-top: 24px;
}

/* =========================================================
   SERVICES PAGE
   ========================================================= */

/* Wrapper: ocupa 100vh, SEM overflow:hidden — permite que o vídeo da mão
   ultrapasse o limite inferior (base alinhada + leve overflow visual).
   O <header> interno tem overflow:hidden para o shader não vazar. */
.services-hero-wrap {
  position: relative;
  height: 100vh;
}

.services-hero {
  position: relative;
  height: 100%; /* ocupa 100% do wrap (= 100vh) */
}
/* Hero da Junte-se a nós = seda (canvas) + celular (vídeo alpha).
   O fundo é fallback: aparece enquanto o shader não pinta o 1º frame, se o
   navegador não tiver WebGL2, ou nas bordas onde a seda não cobre 100%
   (sobretudo o topo — reportado como "muito preto"). Pedido do Lucas: trazer
   esse preto pro vermelho, SEM mexer na interação do shader (silk.js) — é só
   o fallback estático por trás dele que muda, de chapado #2A0606 pra um
   gradiente que nasce no vermelho tiix (marsala) no topo e assenta no tom
   escuro original perto do celular/vídeo (onde o contraste já era o certo). */
.services-hero {
  overflow: hidden;
  /* +30% de luz em cada stop (pedido do Lucas 2026-07-15):
     #871312→#B01917 · #4A0D0C→#601110 · #2A0606→#370808 */
  background: radial-gradient(120% 100% at 50% 0%, #B01917 0%, #601110 45%, #370808 100%);
}
.services-hero__overlay {
  position: absolute; inset: 0;
  /* Era preto 50% CHAPADO — feito pra a foto antiga. Sobre a seda ele abafava
     o shader e o celular. Agora é um scrim DIRECIONAL: escurece só o lado
     direito (onde o texto branco precisa de contraste) e deixa a esquerda
     limpa, que é onde está a mão com o celular. */
  background: linear-gradient(to left,
    rgba(0,0,0,0.62) 0%,
    rgba(0,0,0,0.28) 45%,
    rgba(0,0,0,0.05) 75%,
    rgba(0,0,0,0) 100%);
}
.services-hero__content {
  position: absolute; top: 0; right: 0; bottom: 0; left: 46%; z-index: 1;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end; text-align: right;
  /* padding-left removido (pedido do Lucas 2026-07-20): texto é ancorado à
     direita (align-items:flex-end), então o padding esquerdo só limitava a
     largura disponível pra quebra de linha — sem ele o bloco de texto tem
     mais espaço e se estende mais pro centro da tela.
     justify-content: center (era flex-end, pedido do Lucas 2026-07-20):
     bloco centralizado na altura em relação ao hero inteiro (100vh), em vez
     de colado no rodapé. */
  padding: 0 var(--content-px-desk) 0 0;
}
.services-hero__eyebrow {
  font-size: var(--fs-h3);
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-white);
}
.services-hero__title {
  /* clamp (achado do Lucas 2026-07-28): era 61px fixo, sem nenhum
     responsivo — no mobile cada palavra quebrava numa linha (8 linhas),
     empurrando o vídeo da mão+celular quase pra fora da tela. Desktop
     não muda (8vw só ultrapassa 61px acima de ~760px de largura). */
  font-size: clamp(32px, 8vw, 61px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -2px;
  color: var(--color-white);
  max-width: 760px;
}
.services-hero__body {
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: var(--lh-h3);
  color: rgba(255,255,255,0.70);
  max-width: 480px;
}
.services-hero__content { gap: 24px; }

/* Stats — position:relative + z-index garante que a seção fica SOBRE
   o vídeo da mão que ultrapassa 64px o limite do hero acima. */
.stats {
  position: relative;
  z-index: 3;
  background: var(--color-bg1);
  padding: 80px 0;
  border-bottom: 1px solid var(--color-divider);
}
.stats__title {
  max-width: var(--max-w);
  margin: 0 auto 64px;
  padding: 0 var(--content-px-desk);
  font-size: clamp(36px, 4.5vw, 64px);
  font-weight: 400;
  line-height: 1.26;
  letter-spacing: 0;
  text-align: center;
  color: var(--color-black);
}
.stats__inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 var(--content-px-desk);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
}
.stat { text-align: center; padding: 0 32px; }
.stat:first-child { text-align: left; padding-left: 0; }
.stat:last-child  { text-align: right; }

/* S1: stage compartilhado — logo e número se sobrepõem no mesmo ponto X/Y */
.stat__flip-stage {
  position: relative;
  height: clamp(64px, 8vw, 120px);
  margin-bottom: 24px;
  perspective: 600px;
}

/* S1: logo TIIX → flip 3D rotateY → número */
.stat__pre-logo {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  height: clamp(40px, 5vw, 80px);
  width: auto;
  fill: var(--color-black);
  opacity: 0;
  /* transition removida: GSAP controla 100% da animação via inline style */
}
.stat__pre-logo--red { fill: var(--color-accent); }

.stat__number {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotateY(-90deg);
  white-space: nowrap;
  font-size: clamp(64px, 8vw, 120px);
  font-weight: 400;
  letter-spacing: var(--ls-hero);
  line-height: 1;
  color: var(--color-accent);
  opacity: 0;
  transition: opacity 0.45s ease, transform 0.45s ease-out;
}
.stat__number.is-counting { opacity: 1; transform: translate(-50%, -50%) rotateY(0deg); }
/* Logo/número alinhados com o texto do label (2026-07-20): o 1º/último
   stat têm o texto alinhado à esquerda/direita (.stat:first-child/
   :last-child), mas a logo e o número ficavam sempre centralizados no
   stage inteiro — desalinhados de "Empresas parceiras"/etc. */
.stat:first-child .stat__pre-logo  { left: 0; transform: translate(0, -50%) scale(0.7); }
.stat:first-child .stat__number    { left: 0; transform: translate(0, -50%) rotateY(-90deg); }
.stat:first-child .stat__number.is-counting { transform: translate(0, -50%) rotateY(0deg); }
.stat:last-child .stat__pre-logo   { left: auto; right: 0; transform: translate(0, -50%) scale(0.7); }
.stat:last-child .stat__number     { left: auto; right: 0; transform: translate(0, -50%) rotateY(-90deg); }
.stat:last-child .stat__number.is-counting  { transform: translate(0, -50%) rotateY(0deg); }
.stat__label {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -1.2px;
  color: var(--color-accent);
}

/* Placeholder de asset ainda não entregue (TODO): mostra caixa tracejada
   em vez de imagem quebrada, p/ ficar óbvio que falta o arquivo. */
[data-placeholder="true"] {
  background: repeating-linear-gradient(45deg, rgba(135,19,18,.06) 0 10px, transparent 10px 20px);
  border: 1px dashed rgba(135,19,18,.35);
  border-radius: 12px;
  min-height: 220px;
}
[data-placeholder="true"] img { opacity: 0; }

/* =========================================================
   SEDA + CELULAR  (Junte-se a nós)
   Fundo = shader WebGL que segue o mouse. Frente = vídeo com alpha real.
   SEM mix-blend-mode: o alpha é de verdade, então o celular fica sólido.
   (Com blend ele ficaria fantasmagórico, meio transparente.)
   ========================================================= */
.silk-phone__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  z-index: 0;
}
.silk-phone__fg {
  /* Posicionado no .services-hero-wrap (overflow:visible).
     top:0 → nasce junto com o header.
     height: calc(100% + 64px) → base 64px ABAIXO do limite da seção,
     eliminando o ruído visual de "corte" da mão.
     object-position: left bottom → conteúdo âncora no canto inferior-esq.
     GSAP adiciona paralaxe vertical em initServices() — a mão recua ~48px
     enquanto a seção sai do viewport, gerando profundidade de scroll. */
  position: absolute;
  top: 0; left: 0; right: 0;
  height: calc(100% + 64px);
  width: 100%;
  z-index: 2;
  object-fit: contain;
  object-position: left bottom;
  pointer-events: none;
}

/* Services List */
.services-list {
  background: var(--color-bg2);
  padding: 96px 0;
  min-height: 100vh;
  box-sizing: border-box;
}
/* Pedido do Lucas 2026-07-18 (desktop): "efeito mola" — o conteúdo (título,
   celular) fica no lugar de sempre, intocado; a CAIXA é travada em 100vh com
   overflow:hidden, então só o que sobrar embaixo (ex. legenda do carrossel)
   é recortado — nunca o topo. Isso evita a seção crescer além de 1 tela
   enquanto pinada (que fazia a gaveta #footer-cta ou o fim do pin cortarem
   o rodapé). Só desktop: no mobile a seção empilha e não é pinada assim. */
@media (min-width: 1024px) {
  .services-list { height: 100vh; overflow: hidden; }
  /* flex column (achado do Lucas 2026-07-29, "centralize esse conteúdo...
     na altura central da tela"): sem isso, .services-dual tinha altura
     "auto" — igual à do filho mais alto (o celular 3D, agora até 900px) —
     e align-items:center centralizava o texto do orbit-stage no MEIO
     DESSA CAIXA INFLADA, não no centro visível da tela (a caixa
     ultrapassava o rodapé do viewport, cortada pelo overflow:hidden
     acima, então seu "meio" ficava mais baixo que o meio real da tela).
     flex:1 (na regra de .services-dual abaixo) faz a caixa ocupar
     exatamente o espaço que sobra depois do título — daí o centro da
     caixa bate com o centro do que está realmente visível. */
  .services-list { display: flex; flex-direction: column; }
  /* Pedido do Lucas 2026-07-18: colchão de segurança contra o bug do
     footer-cta empurrando o conteúdo por cima da topbar (DEC-0015/16/17
     atacam a causa; isto é defesa visual — mesmo que algo escape, a
     folga (148-64=84px, > que o salto de ~80px observado no vídeo) evita
     que o conteúdo chegue a invadir a nav fixa de 64px). */
  .services-list { padding-top: 148px; }
}
.services-list__title {
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 var(--content-px-desk);
  font-size: clamp(30px, 4.5vw, 56px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -2px;
  color: var(--color-white);
  margin-bottom: 48px;
  white-space: nowrap;
}
@media (max-width: 1023px) {
  .services-list__title { text-align: center; }
}
/* =========================================================
   ORBIT-STAGE — texto sincronizado ao carrossel do celular
   (pedido do Lucas 2026-07-15). Substitui a lista estática de
   .service-item: só o item ATIVO fica visível; na troca de slide
   (evento carousel:change, main.js) o item que sai gira "por trás"
   do celular em perspectiva 3D (giroscópio) e o novo entra pelo
   mesmo eixo — efeito sempre no mesmo sentido de giro.
   ========================================================= */
/* S5: wrapper que coloca phone na esquerda e textos na direita */
.services-dual {
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 var(--content-px-desk) 72px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
}
@media (min-width: 1024px) {
  /* flex:1/min-height:0 — ver comentário em .services-list acima. Sem
     min-height:0 o item flex herda min-height:auto (default), que
     mantém a caixa esticada pelo conteúdo (o celular) mesmo dentro de
     um flex container — voltando ao bug original.
     grid-template-rows:minmax(0,1fr) — sem isso a ÚNICA linha implícita
     do grid continua com altura "auto" (do tamanho do celular), mesmo a
     CAIXA do grid já estando limitada pelo flex:1 acima — então
     align-items:center centralizava contra a linha (alta) e não contra
     a caixa (a certa). Com a linha travada em 1fr da caixa, os dois
     batem. */
  .services-dual { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  .services-dual { grid-template-columns: 1fr; padding-bottom: 0; }
}

.orbit-stage {
  display: grid;
  perspective: 1000px;
  min-height: 180px;
}
.orbit-item {
  grid-area: 1 / 1; /* todos ocupam a mesma célula — a troca é só opacidade/transform */
  text-align: left;
  opacity: 0;
  transform: rotateY(65deg) translateZ(-60px);
  transform-origin: center;
  transition: transform .6s cubic-bezier(.4, 0, .2, 1), opacity .45s ease;
  pointer-events: none;
}
@media (max-width: 1023px) {
  .orbit-stage { margin-top: 32px; min-height: 132px; }
  .orbit-item { text-align: center; }
}
.orbit-item.is-active {
  opacity: 1;
  transform: rotateY(0deg) translateZ(0);
  transition-delay: .1s;
  pointer-events: auto;
}
.orbit-item.is-exit {
  opacity: 0;
  transform: rotateY(-65deg) translateZ(-60px);
  transition-delay: 0s;
}
.orbit-item__name {
  font-size: clamp(22px, 1.8vw, 30px);
  font-weight: 500;
  letter-spacing: var(--ls-h3);
  color: var(--color-white);
  margin-bottom: 14px;
}
.orbit-item__desc {
  font-size: clamp(16px, 1.25vw, 20px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-white);
  opacity: 0.70;
  max-width: 44ch;
}
@media (max-width: 1023px) {
  .orbit-item__desc { margin: 0 auto; }
}
/* reduced-motion: troca seca, sem giro 3D */
@media (prefers-reduced-motion: reduce) {
  .orbit-item { transition: opacity .3s ease; transform: none !important; }
}

/* =========================================================
   APP PREVIEW — carrossel dentro de mockup de iPhone
   Mockup em CSS puro, portado da opção A do duas-opcoes.html.
   ========================================================= */
.app-preview {
  /* max-width/padding/margin gerenciados pelo .services-dual */
}
/* setas ao LADO do celular (pedido do Lucas 2026-07-15); bolinhas embaixo.
   .app-carousel = linha [seta-prev | stage | seta-next]; .app-carousel__stage
   = coluna [celular | bolinhas], pra bolinha ficar centralizada sob o aparelho. */
.app-carousel {
  background: transparent;
  padding: 0;
  margin: 0;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.app-carousel__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 16px (era 32px) — o .phone (412x892 real, sv2) ficou mais alto que a
     versão estática antiga; em telas de ~900px de altura o stack
     [celular+bolinhas] passava do fundo do .services-list (height:100vh;
     overflow:hidden, "efeito mola" 2026-07-18) e cortava as bolinhas
     (reportado pelo Lucas 2026-07-20). */
  gap: 16px;
}
/* corpo do aparelho — moldura fina estilo iPhone atual (pedido do Lucas
   2026-07-20: bezel exagerado antes; agora ~3px, cantos concêntricos com
   phone__screen). Altura exata (sem sobra/gap no rodapé) é ajustada em JS —
   ver fitAppPhone() em services-showcase.js, mesma lógica do preview B v2. */
.phone {
  position: relative;
  width: clamp(240px, 20vw, 300px);
  aspect-ratio: 9 / 19.27; /* fallback CSS; JS calibra o valor exato */
  border-radius: 44px;
  background: #0d0d0f;
  padding: 3px;
  box-shadow: 0 30px 70px rgba(0,0,0,.45), 0 0 0 2px rgba(255,255,255,.10) inset;
  flex-shrink: 0;
}
/* Dynamic Island (substituiu o notch antigo) */
.phone::before {
  content: '';
  position: absolute; top: 9px; left: 50%;
  transform: translateX(-50%);
  width: 44px; height: 13px; /* island proporcionalmente MENOR: metade de 88×26 nas 2 dimensões (pedido do Lucas 2026-07-21 — reduzir só a altura deixava ela larga/esticada, parecendo maior) */
  border-radius: 100px;
  background: #000;
  z-index: 3;
}
.phone__screen {
  position: absolute; inset: 3px;
  border-radius: 41px;
  overflow: hidden;
  background: var(--color-white);
}

/* Celular 3D (opcional, desktop): mesmo tamanho do slot do .phone CSS;
   só aparece quando o JS confirma que a cena 3D carregou (.has-3d),
   escondendo o .phone estático no lugar dela. Sem JS/WebGL, ou no
   mobile, o .phone CSS acima permanece — nunca fica sem celular. */
.services-phones-3d {
  display: none;
  /* height-driven, quase a seção inteira (era width:clamp(280-380px) —
     achado do Lucas 2026-07-29, "aumente o celular... deixe ele ocupando
     quase a section/viewport inteiro"): .services-list é height:100vh no
     desktop, então basear no vh (não vw) deixa o celular grande em
     qualquer largura de coluna. max-width:100% é a rede de segurança pra
     não estourar a coluna 1fr do .services-dual em telas muito altas/
     estreitas. Ver também o fix de framing em tiix-phones-3d.js (frame()) —
     sem ele o celular renderizava pequeno dentro do próprio canvas.
     2026-07-29 (2): com .services-list__title de volta no topo, 85vh
     centralizado em .services-dual passava por cima do título. Reserva
     medida via getBoundingClientRect (não só o padding-top): 148px
     padding-top + até 59px de texto + 48px de margem do título (topo) +
     96px de padding-bottom do .services-list + ~30px de bolinhas/gap do
     .app-carousel__stage (rodapé) ≈ 382px no total. */
  height: min(calc(100vh - 382px), 85vh, 900px);
  width: auto;
  max-width: 100%;
  aspect-ratio: 9 / 19.27;
}
@media (min-width: 768px) {
  .app-carousel.has-3d .phone { display: none; }
  .app-carousel.has-3d .services-phones-3d { display: block; }
}

/* =========================================================================
   SERVICES V2 — conteúdo real das 6 pré-composições dentro do .phone__screen
   (Busca, Agendar, TiixTok, S.O.S, Histórico, Cuidado contínuo), portado do
   preview 04_CODE/previews/services-list-b/services-list-B-v2.html.
   Tudo aqui é prefixado "sv2-" (classes E custom properties) de propósito —
   zero colisão com o resto do site, mesmo se nomes genéricos (ex. --white,
   .body) forem usados em outro lugar no futuro. Documentação completa da
   arquitetura (composição geral > A/B, pré-composições A1..A6) no preview.
   Ver também: fitAppPhone() em js/services-showcase.js (scale-to-fit) e os
   6 <div class="carousel__slide"> em index.html (linhas ~497-503).
   ========================================================================= */
:root{
  --sv2-bg1:#FFFFFF;--sv2-red:#871312;--sv2-ink:#31110F;--sv2-ds-ink:#1F1F1F;--sv2-white:#fff;
  --sv2-grey11:#1c1c1e;--sv2-grey53:#888;--sv2-grey87:#ddd;--sv2-grey94:#f0f0f0;--sv2-grey95:#f2f2f2;--sv2-grey79:#c7c7cc;
  --sv2-cinza:#8c8c8c;--sv2-preto:#232323;--sv2-green-bg:#e6fdef;--sv2-green:#27ba62;--sv2-red-soft:#fae9e9;--sv2-cinza-escuro:#565656;
  --sv2-shadow-top:0 4px 15px rgba(54,41,183,.07);
  --sv2-font:'Outfit Variable','Outfit',system-ui,-apple-system,sans-serif;
}

  /* ---------- PHONE (frame) — moldura fina estilo iPhone atual (bezel ~3px, cantos concêntricos) ---------- */
  /* Dynamic Island — vive dentro do #stage (coordenada nativa 412, escala junto com o resto),
     não dentro de cada pré-composição: um elemento só, compartilhado por A1..A6. */
  /* DUPLICATA REMOVIDA (bug "2 islands sobrepostas", Lucas 2026-07-21): esta
     island vivia dentro do stage E colidia com a .phone::before (do chassi do
     celular, a oficial — ver comentário "substituiu o notch antigo"). Ficavam
     duas quase concêntricas = anel duplo. Mantida só a .phone::before. */
  .sv2-dynamic-island{display:none}
  /* stage = native 412 canvas, scaled by JS to fit .sv2-phone__screen */
  .sv2-stage{position:absolute;top:0;left:0;width:412px;height:892px;transform-origin:top left}

  .sv2-screen{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .5s ease;z-index:1;background:#fff}
  .sv2-screen.sv2-active{opacity:1;pointer-events:auto;z-index:2}

  /* ---------- CHROME (native 412) ---------- */
  .sv2-navbar{position:absolute;top:0;left:0;right:0;z-index:40;background:#fff;border-radius:0 0 16px 16px;box-shadow:var(--sv2-shadow-top);height:107px;display:flex;flex-direction:column}
  .sv2-statusbar{display:flex;justify-content:space-between;align-items:center;height:44px;padding:0 21px;font-size:15px;font-weight:600;color:#000}
  .sv2-statusbar .sv2-sig{display:flex;gap:6px;align-items:center}
  .sv2-topbar-row{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;padding:0 2px;flex:1}
  .sv2-topbar-row .sv2-tb-ico{width:40px;height:40px;display:grid;place-items:center;color:var(--sv2-red)}
  .sv2-topbar-row .sv2-tb-ico--r{justify-self:end}
  .sv2-topbar-row .sv2-tb-title{text-align:center;font-size:18px;font-weight:400;letter-spacing:-.2px;color:var(--sv2-ds-ink)}

  .sv2-tabbar{position:absolute;bottom:0;left:0;right:0;z-index:40;background:#fff;height:109px;border-radius:24px 24px 0 0;box-shadow:0 -4px 15px rgba(54,41,183,.06)}
  .sv2-tabbar__row{display:flex;justify-content:space-between;padding:19px 30px 0}
  .sv2-tabbar__i{display:flex;flex-direction:column;align-items:center;gap:3px;width:56px;color:var(--sv2-cinza)}
  .sv2-tabbar__i svg{display:block}
  .sv2-tabbar__i span{font-size:8px;font-weight:400;color:var(--sv2-cinza);white-space:nowrap}
  .sv2-tabbar__home{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:134px;height:5px;border-radius:100px;background:var(--sv2-preto)}

  /* body scroll area between chrome */
  .sv2-body{position:absolute;left:0;right:0;top:107px;bottom:109px;overflow-y:auto;overflow-x:hidden;background:#fff;-ms-overflow-style:none;scrollbar-width:none}
  .sv2-body::-webkit-scrollbar{display:none}

  /* ---------- BUSCA (Figma 3153:51579, valores nativos) ---------- */
  .sv2-bk-search{display:flex;align-items:center;gap:10px;background:var(--sv2-grey95);padding:6px 14px 10px}
  .sv2-bk-back{width:36px;height:36px;flex:0 0 auto;background:#fff;border-radius:18px;box-shadow:0 1px 1.5px rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;color:var(--sv2-red)}
  .sv2-bk-field{flex:1;position:relative;background:#fff;border-radius:22px;box-shadow:0 1px 1.5px rgba(0,0,0,.08);height:41px;display:flex;align-items:center}
  .sv2-bk-field .sv2-bk-mag{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#8b8b8b}
  .sv2-bk-field input,.sv2-bk-field .sv2-bk-inp{border:0;outline:0;background:transparent;font-family:var(--sv2-font);width:100%;padding:0 36px;font-size:14.8px;color:var(--sv2-grey11)}
  .sv2-bk-clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:20px;height:20px;background:var(--sv2-grey79);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff}

  .sv2-bk-tabs{display:flex;background:#fff;border-bottom:1px solid var(--sv2-grey94);height:43px;padding:0 6px;align-items:stretch;overflow:hidden}
  .sv2-bk-tab{display:flex;align-items:center;padding:0 10px;font-size:14px;color:var(--sv2-grey53);white-space:nowrap;position:relative}
  .sv2-bk-tab--on{color:var(--sv2-red);font-weight:700}
  .sv2-bk-tab--on::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;background:var(--sv2-red)}

  .sv2-bk-filters{background:#fff;border-bottom:1px solid var(--sv2-grey94);padding:10px 14px 11px;display:flex;flex-direction:column;gap:8px}
  .sv2-bk-frow{display:flex;gap:8px;align-items:center;overflow:hidden}
  .sv2-bk-chip{flex:0 0 auto;border:1px solid var(--sv2-grey87);background:#fff;border-radius:22px;padding:8px 14px;font-size:12.4px;color:var(--sv2-grey11);display:flex;align-items:center;gap:5px;white-space:nowrap}
  .sv2-bk-chip--ico{padding:9.5px 11px}
  .sv2-bk-chip--on{background:var(--sv2-red);color:#fff;border-color:var(--sv2-red);padding:7px 13px;font-size:10.7px}
  .sv2-bk-chip .sv2-bk-caret{font-size:10px}

  .sv2-bk-main{padding:8px 16px 0;background:#fff}
  .sv2-bk-sechead{display:flex;align-items:center;justify-content:space-between;padding:18px 0 14px}
  .sv2-bk-sechead h3{font-size:17.7px;font-weight:700;color:var(--sv2-grey11)}
  .sv2-bk-sechead .sv2-bk-ver{font-size:12.9px;font-weight:500;color:var(--sv2-red)}
  .sv2-bk-list{display:flex;flex-direction:column;gap:34px;padding-bottom:24px}

  .sv2-pcard{display:flex;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 30px rgba(54,41,183,.07)}
  .sv2-pcard__photo{width:146px;flex:0 0 auto;background-size:cover;background-position:center;background-color:#eee}
  .sv2-pcard__body{flex:1;display:flex;flex-direction:column;padding:12px 12px 12px 9px;min-width:0;text-align:left}
  .sv2-pcard__name{font-size:17px;font-weight:600;color:#000;letter-spacing:-.2px;line-height:1.3}
  .sv2-pcard__spec{font-size:14px;color:var(--sv2-cinza);line-height:1.2}
  .sv2-pcard__vp{font-size:12px;color:var(--sv2-red);line-height:1.4}
  .sv2-pcard__row{display:flex;align-items:center;gap:8px;margin-top:12px}
  .sv2-pcard__chip{background:var(--sv2-green-bg);color:var(--sv2-green);font-size:9px;border-radius:4px;padding:4px 7px;white-space:nowrap;line-height:1}
  .sv2-pcard__rate,.sv2-pcard__rev{display:flex;align-items:center;gap:2px;font-size:11px;color:var(--sv2-preto)}
  .sv2-pcard__rate svg{color:#f6b73c}
  .sv2-pcard__rev svg{color:var(--sv2-red)}
  .sv2-pcard__addr{margin-top:12px;display:flex;flex-direction:column;gap:4px}
  .sv2-pcard__addrline{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:300;color:var(--sv2-cinza)}
  .sv2-pcard__mapa{display:inline-flex;align-items:center;gap:3px;font-size:8px;font-weight:700;color:var(--sv2-red)}
  .sv2-pcard__crm,.sv2-pcard__inst{font-size:12px;font-weight:300;color:var(--sv2-cinza);line-height:1.4}
  .sv2-pcard__cta{margin-top:auto;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
  .sv2-pcard__agendar{border:0;font-family:var(--sv2-font);background:var(--sv2-red);color:#fff;font-weight:700;font-size:10px;border-radius:12px;padding:6px 24px;box-shadow:0 3px 8px rgba(15,39,74,.1)}
  .sv2-pcard__acts{display:flex;gap:6px;color:var(--sv2-red)}
  .sv2-pcard__acts .sv2-sh{color:var(--sv2-red)}

  /* ---------- AGENDAR (Figma 9723:282020 "LAB · Agendar" — detalhe de agendamento de procedimento) ---------- */
  .sv2-ag2-content{padding:20px 16px 24px}
  .sv2-ag2-tabs{display:flex;gap:8px;margin-bottom:18px}
  .sv2-ag2-tab{flex:0 0 auto;background:#fff;border:.5px solid #565656;border-radius:12px;padding:9px 16px;font-size:13px;color:var(--sv2-grey11)}
  .sv2-ag2-tab--on{background:var(--sv2-red-soft);border-color:var(--sv2-red-soft);color:var(--sv2-red);font-weight:700;padding:9px 20px}
  .sv2-ag2-select{display:flex;align-items:center;justify-content:space-between;background:#fff;border:.5px solid var(--sv2-red);border-radius:5px;padding:9px 16px;font-size:15px;color:#000;margin-bottom:22px;font-weight:300}
  .sv2-ag2-select svg{color:var(--sv2-preto);flex:0 0 auto}
  .sv2-ag2-h3{font-size:15.5px;font-weight:700;color:#000;margin-bottom:10px}
  .sv2-ag2-modalidade{display:flex;gap:10px;margin-bottom:18px}
  .sv2-ag2-mtab{flex:0 0 auto;background:#fff;border:.5px solid #565656;border-radius:12px;padding:9px 16px;font-size:13px;color:var(--sv2-grey11)}
  .sv2-ag2-mtab--on{background:var(--sv2-red-soft);border-color:var(--sv2-red-soft);color:var(--sv2-red);font-weight:700}
  .sv2-ag2-fields{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
  .sv2-ag2-field{display:flex;align-items:center;gap:10px;background:#fff;border-radius:16px;padding:13px 16px;box-shadow:2px 0 20px rgba(24,57,107,.05)}
  .sv2-ag2-field__ic{color:var(--sv2-red);flex:0 0 auto}
  .sv2-ag2-field__t{flex:1;font-size:12px;color:var(--sv2-preto)}
  .sv2-ag2-field__add{color:var(--sv2-red);flex:0 0 auto}
  .sv2-ag2-card{background:#fff;border:.5px solid var(--sv2-red);border-radius:5px;padding:12px 16px;display:flex;justify-content:space-between;gap:10px;margin-bottom:22px}
  .sv2-ag2-card__t{font-size:15.5px;font-weight:700;color:#000}
  .sv2-ag2-card__d{font-size:12.5px;color:var(--sv2-cinza);margin-top:3px}
  .sv2-ag2-card__prices{display:flex;gap:8px;flex:0 0 auto}
  .sv2-ag2-price{text-align:center}
  .sv2-ag2-price__l{font-size:9.5px;letter-spacing:.04em;color:var(--sv2-cinza);margin-bottom:5px;white-space:nowrap}
  .sv2-ag2-price__v{background:var(--sv2-red-soft);color:var(--sv2-red);font-weight:700;font-size:13px;border-radius:12px;padding:6px 10px;white-space:nowrap}
  .sv2-ag2-desc__h{font-size:16px;font-weight:700;color:#000;margin-bottom:10px}
  .sv2-ag2-desc__p{font-size:11.5px;color:var(--sv2-cinza-escuro);line-height:1.6;text-align:justify;margin-bottom:24px}
  .sv2-ag2-cta{display:block;width:312px;max-width:100%;margin:0 auto;border:0;font-family:var(--sv2-font);background:var(--sv2-red);color:#fff;text-align:center;padding:16px;border-radius:16px;font-size:14px;font-weight:700;letter-spacing:.02em;box-shadow:0 3px 8px rgba(15,39,74,.1)}

  /* ---------- TIIXTOK (Figma 9723:57 "LAB · TiixTok" — feed estilo Instagram) ---------- */
  .sv2-tt2-navbar{position:absolute;top:0;left:0;right:0;z-index:40;background:#fff;height:193px;box-shadow:var(--sv2-shadow-top)}
  .sv2-tt2-logo-row{display:flex;align-items:center;justify-content:center;gap:2px;position:relative;height:53px}
  .sv2-tt2-logo-row img{height:25px;display:block}
  /* top:0.15em desce o "Tok" pra base VISUAL da logo (pedido do Lucas 2026-07-21,
     mesmo problema do "saúde"): a logo-row é align-items:center, e o PNG "Tiix"
     é cropado até a base dos glifos — então centralizar deixava o "Tok" ~2px
     acima da base. Em em pra escalar junto com o stage. */
  .sv2-tt2-logo-row b{color:#871212;font-size:24px;font-weight:700;letter-spacing:-.015em;position:relative;top:0.15em}
  .sv2-tt2-menu{position:absolute;right:16px;color:var(--sv2-grey11)}
  .sv2-tt2-stories{display:flex;gap:14px;padding:0 16px;overflow:hidden}
  .sv2-tt2-story{display:flex;flex-direction:column;align-items:center;gap:3px;flex:0 0 auto}
  .sv2-tt2-story__ring{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;box-sizing:border-box}
  .sv2-tt2-story__ring--dashed{border:2px dashed #fff;box-shadow:0 0 0 2px var(--sv2-grey87)}
  .sv2-tt2-story__ring--on{background:var(--sv2-red);padding:2px}
  .sv2-tt2-story__ring--off{background:#e2e8f0;padding:2px;opacity:.6}
  .sv2-tt2-story__av{width:100%;height:100%;border-radius:50%;border:2px solid #fff;background-size:cover;background-position:center;box-sizing:border-box}
  .sv2-tt2-story span{font-size:11px;font-weight:500;color:#0f172a}
  .sv2-tt2-body{position:absolute;left:0;right:0;top:193px;bottom:109px;overflow-y:auto;overflow-x:hidden;background:#fff}
  .sv2-tt2-post{background:#fff;border-radius:12px;box-shadow:0 2px 4px -1px rgba(175,182,201,.2);padding:0 16px 16px;margin:8px 0}
  .sv2-tt2-post__head{display:flex;align-items:center;gap:12px;padding:11px 4px}
  .sv2-tt2-post__av{width:40px;height:40px;border-radius:50%;flex:0 0 auto;background-size:cover;background-position:center}
  .sv2-tt2-post__name{flex:1;font-size:15px;font-weight:600;color:#29343d}
  .sv2-tt2-post__star{color:var(--sv2-red);flex:0 0 auto}
  .sv2-tt2-post__more{color:var(--sv2-cinza);margin-left:8px;flex:0 0 auto}
  .sv2-tt2-post__img{width:100%;height:230px;border-radius:3px;background-size:cover;background-position:center}
  .sv2-tt2-dots{display:flex;gap:4px;justify-content:center;margin:10px 0}
  .sv2-tt2-dots span{width:5px;height:5px;border-radius:50%;background:var(--sv2-grey87)}
  .sv2-tt2-dots span:first-child{background:var(--sv2-red)}
  .sv2-tt2-actions{display:flex;align-items:center;gap:16px;padding:0 4px;margin-bottom:10px}
  .sv2-tt2-actions .sv2-sp{flex:1}
  .sv2-tt2-actions svg{color:#29343d}
  .sv2-tt2-actions .sv2-heart{color:var(--sv2-red)}
  .sv2-tt2-liked{padding:0 4px;font-size:14px;color:#29343d;margin-bottom:2px}
  .sv2-tt2-liked b{font-weight:600}
  .sv2-tt2-comment{padding:0 4px;font-size:14px;color:#29343d;line-height:1.4;margin-bottom:6px}
  .sv2-tt2-comment b{font-weight:600}
  .sv2-tt2-comment .sv2-more{color:#98a4ae}
  .sv2-tt2-time{padding:0 4px;font-size:12px;color:#98a4ae}

  /* ---------- Footer / TiixTok (custom, compartilhado entre TiixTok e Cuidado contínuo) ---------- */
  .sv2-tt-footer{position:absolute;bottom:0;left:0;right:0;z-index:40;background:#fff;height:109px;border-radius:24px 24px 0 0;box-shadow:0 -4px 15px rgba(54,41,183,.06)}
  .sv2-tt-footer__row{display:flex;justify-content:space-between;align-items:center;padding:19px 24px 0}
  .sv2-tt-footer__i{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--sv2-cinza);width:56px}
  .sv2-tt-footer__i span{font-size:8px;color:#98a4ae}
  .sv2-tt-footer__i--home{align-items:center}
  .sv2-tt-footer__i--home img{height:25px;display:block}
  .sv2-tt-footer__i--home span{color:var(--sv2-red);font-weight:500}
  .sv2-tt-footer__home-bar{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:134px;height:5px;border-radius:100px;background:var(--sv2-preto)}

  /* ---------- S.O.S (Figma 9723:280 "LAB · SOS") ---------- */
  .sv2-topbar-row .sv2-tb-title.sv2-tb-title--sos{color:var(--sv2-red);font-weight:700}
  .sv2-sos-body-bg{background:#f8f6f6!important}
  .sv2-sos-content{padding:16px 16px 0;display:flex;flex-direction:column}
  .sv2-sos-search{display:flex;align-items:center;gap:8px;background:#fff;border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.05);height:41px;padding:0 16px 0 48px;position:relative;margin-bottom:12px}
  .sv2-sos-search svg{color:#94a3b8;flex:0 0 auto;position:absolute;left:25px}
  .sv2-sos-search span{font-size:14px;color:#94a3b8;font-family:var(--sv2-font)}
  .sv2-sos-quick{display:flex;align-items:center;justify-content:center;gap:8px;background:#e2e8f0;border-radius:16px;height:35px;margin-bottom:34px;font-size:14px;font-weight:500;color:#0f172a}
  .sv2-sos-quick svg{color:#0f172a}
  .sv2-sos-h2{font-size:16px;font-weight:700;color:#0f172a;letter-spacing:-.02em;margin-bottom:12px}
  .sv2-sos-contacts{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
  .sv2-sos-row{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #fff1f1;border-radius:12px;padding:17px}
  .sv2-sos-row__ph{width:48px;height:48px;border-radius:50%;flex:0 0 auto;background-size:cover;background-position:center}
  .sv2-sos-row__t{flex:1;min-width:0}
  .sv2-sos-row__t b{font-size:16px;display:block;color:#0f172a;font-weight:600}
  .sv2-sos-row__t small{font-size:14px;color:var(--sv2-red);font-weight:500}
  .sv2-sos-row__call{width:32px;height:32px;border-radius:50%;background:#fff1f1;display:grid;place-items:center;color:var(--sv2-red);flex:0 0 auto}
  .sv2-sos-add{display:inline-flex;align-items:center;gap:8px;background:#fff1f1;color:var(--sv2-red);font-size:14px;font-weight:700;border-radius:12px;padding:0 16px;height:40px;margin-bottom:34px}
  .sv2-sos-info{background:#fff;border:1px solid #c6c6c6;border-radius:12px;padding:7px 25px 25px;box-shadow:0 1px 1px rgba(0,0,0,.05);margin-bottom:24px}
  .sv2-sos-info__head{display:flex;align-items:center;gap:8px;padding:14px 0}
  .sv2-sos-info__head svg{color:var(--sv2-red)}
  .sv2-sos-info__head b{font-size:18px;color:#0f172a;font-weight:700}
  .sv2-sos-info__item{display:flex;align-items:center;gap:12px;margin-top:16px}
  .sv2-sos-info__item:first-of-type{margin-top:0}
  .sv2-sos-info__ic{width:32px;height:32px;border-radius:50%;background:var(--sv2-red-soft);display:grid;place-items:center;color:var(--sv2-red);flex:0 0 auto}
  .sv2-sos-info__item span{font-size:16px;font-weight:600;color:#334155;line-height:1.5}
  .sv2-sos-fabs{position:absolute;left:16px;right:16px;bottom:102px;display:flex;justify-content:center;gap:12px;z-index:41}
  .sv2-sos-fab{width:175px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--sv2-red);color:#fff;font-size:16px;font-weight:700;border-radius:9999px;height:48px;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
  .sv2-sos-fab:last-child{width:171px}
  .sv2-sos-hint{position:absolute;left:0;right:0;bottom:18px;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:41}
  .sv2-sos-hint p{font-size:13px;color:#0f172a;letter-spacing:.03em;text-align:center;max-width:300px;white-space:nowrap;text-transform:lowercase}
  .sv2-sos-hint__bars{display:flex;gap:4px}
  .sv2-sos-hint__bars span{width:48px;height:6px;border-radius:100px;background:#cbd5e1}
  .sv2-sos-hint__bars span:first-child{background:var(--sv2-red)}

  /* ---------- HISTÓRICO (Figma 9723:375 "LAB · Historico" — anamnese/questionário) ---------- */
  .sv2-hs-body-bg{background:#f1f0f5!important}
  .sv2-hs-body{padding:12px}
  .sv2-hs-head{padding:0 4px;margin-bottom:12px}
  .sv2-hs-head__t{font-size:20px;font-weight:700;color:#1f2937}
  .sv2-hs-head__d{font-size:13px;color:#71717a;margin-top:4px;line-height:1.4}
  .sv2-hs-card{background:#fff;border:1px solid #ebe7f1;border-radius:16px;padding:4px 16px 6px;margin-bottom:12px;box-shadow:0 6px 18px rgba(15,23,42,.04)}
  .sv2-hs-card__head{display:flex;align-items:center;gap:10px;padding:14px 0 10px}
  .sv2-hs-card--flat{padding:4px 16px}
  .sv2-hs-card--flat .sv2-hs-card__head{padding:14px 0}
  .sv2-hs-card__chev{color:var(--sv2-red);flex:0 0 auto}
  .sv2-hs-card__t{font-size:15px;font-weight:700;color:#1f2937;flex:1}
  .sv2-hs-card__badge{font-size:12px;font-weight:600;color:var(--sv2-red)}
  .sv2-hs-row{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #efeaf5}
  .sv2-hs-row:last-child{border-bottom:0}
  .sv2-hs-row__t{flex:1;font-size:14px;font-weight:500;color:#1f2937;line-height:1.3}
  .sv2-hs-toggle{width:40px;height:24px;border-radius:999px;background:#d1d5db;display:flex;align-items:center;flex:0 0 auto;padding:3px;box-sizing:border-box}
  .sv2-hs-toggle__k{width:18px;height:18px;border-radius:50%;background:#fff}
  .sv2-hs-toggle--on{background:#1fbe78}
  .sv2-hs-toggle--on .sv2-hs-toggle__k{margin-left:16px}

  /* ---------- CUIDADO CONTÍNUO (Figma 9723:458 "LAB · Cuidado" — thread de chat) ---------- */
  .sv2-cc2-navbar{position:absolute;top:0;left:0;right:0;z-index:40;background:#fff;height:89px;box-shadow:var(--sv2-shadow-top);display:flex;flex-direction:column}
  .sv2-cc2-header{display:flex;align-items:center;gap:8px;padding:0 14px 0 20px;flex:1}
  .sv2-cc2-header__back{color:var(--sv2-red);flex:0 0 auto}
  .sv2-cc2-header__ring{width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 2px var(--sv2-green);flex:0 0 auto;background-size:cover;background-position:center}
  .sv2-cc2-header__name{flex:1;font-size:20px;font-weight:600;color:var(--sv2-red);letter-spacing:-.02em}
  .sv2-cc2-header__more{color:var(--sv2-cinza);flex:0 0 auto}
  .sv2-cc2-body{position:absolute;left:0;right:0;top:89px;bottom:109px;overflow-y:auto;overflow-x:hidden;background:#f8f6f6;padding:16px}
  .sv2-cc2-today{display:block;margin:0 auto 24px;width:fit-content;background:#f1f5f9;color:#94a3b8;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border-radius:100px;padding:4px 12px}
  .sv2-cc2-msg-in{display:flex;align-items:flex-end;gap:12px;margin-bottom:4px}
  .sv2-cc2-avatar-ring{width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 2px var(--sv2-green);flex:0 0 auto;background-size:cover;background-position:center}
  .sv2-cc2-bubble-in{max-width:262px;background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.05);border-radius:16px 16px 16px 0;padding:16px 17px;font-size:14px;color:#0f172a;line-height:1.6}
  .sv2-cc2-time-in{font-size:10px;color:#94a3b8;margin:4px 0 14px 52px}
  .sv2-cc2-msg-out{display:flex;justify-content:flex-end}
  .sv2-cc2-bubble-out{max-width:250px;background:var(--sv2-red);color:#fff;box-shadow:0 8px 15.7px -2px rgba(0,0,0,.15),0 4px 6px -1px rgba(135,18,18,.2);border-radius:16px 16px 0 16px;padding:15px 16px;font-size:14px;line-height:1.6}
  .sv2-cc2-time-out{display:flex;align-items:center;gap:4px;justify-content:flex-end;font-size:10px;color:#94a3b8;margin-top:4px}
  .sv2-cc2-input-bar{position:absolute;left:16px;right:16px;bottom:125px;height:46px;background:#e0e6eb;border-radius:9999px;display:flex;align-items:center;padding:0 8px 0 24px;z-index:41}
  .sv2-cc2-input-bar span{flex:1;font-size:14px;color:#5a6a85}
  .sv2-cc2-input-bar svg{color:var(--sv2-red);flex:0 0 auto}

/* ---------- fim SERVICES V2 ---------- */

/* os slides preenchem a tela do aparelho */
.app-carousel .carousel__slides { position: absolute; inset: 0; }
.app-carousel .carousel__slide { display: none; height: 100%; position: relative; }
.app-carousel .carousel__slide.active { display: block; }
.app-carousel .carousel__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
/* Wordmarks da marca DENTRO dos stages (logo do TiixTok na navbar, "voltar pra
   Tiix" no rodapé) são logos que precisam manter proporção — a regra genérica
   acima forçava width:100%+object-fit:cover neles, esticando o "Tiix" num
   swoosh distorcido (bug reportado pelo Lucas 2026-07-21). Especificidade
   (0,3,1) > (0,2,1) da regra genérica, então vence sem !important. */
.app-carousel .carousel__slide .sv2-tt2-logo-row img,
.app-carousel .carousel__slide .sv2-tt-footer__i--home img {
  width: auto; height: 25px; object-fit: contain;
}
/* ── Micro-preview animated frames ──────────────────────────────────── */
/* Frame A: natural proportions so translateY reveals content below fold */
.carousel__slide .phone__preview--a {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: auto;
  object-fit: unset;
  object-position: unset;
  display: block;
  will-change: transform, opacity;
}
/* Chrome fixo do app (topbar/footer): conteúdo rola por baixo */
.carousel__slide .phone__chrome {
  position: absolute;
  left: 0;
  width: 100%; height: auto;
  display: block;
  z-index: 3;
  pointer-events: none;
}
.carousel__slide .phone__chrome--top { top: 0; }
.carousel__slide .phone__chrome--bottom { bottom: 0; }
/* Frame B: destino após o tap — mesma área de conteúdo do Frame A (entre o
   chrome fixo); NUNCA a tela inteira. O chrome (topo/rodapé) nunca muda, só
   o conteúdo é substituído (top é setado via JS, igual ao Frame A). */
.carousel__slide .phone__preview--b {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: auto;
  object-fit: unset;
  object-position: unset;
  display: block;
  will-change: transform, opacity;
  opacity: 0;
  z-index: 2;
}
/* Tap ripple indicator */
.phone__tap {
  position: absolute;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(135, 19, 18, .20);
  border: 2px solid rgba(135, 19, 18, .55);
  pointer-events: none;
  z-index: 10;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
}
/* reduced-motion: show static Frame A only */
@media (prefers-reduced-motion: reduce) {
  .carousel__slide .phone__preview--a {
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .carousel__slide .phone__preview--b,
  .carousel__slide .phone__chrome,
  .phone__tap { display: none !important; }
}
/* bolinhas do carrossel: fora do aparelho, sobre o vermelho (setas
   removidas — achado do Lucas 2026-07-29, "remova as setinhas") */
.app-carousel .carousel__dots { margin-top: 0; }
.app-carousel .carousel__dot { background: rgba(255,255,255,.30); }
.app-carousel .carousel__dot.active { background: var(--color-white); }

/* =========================================================
   SCHEDULE PAGE
   ========================================================= */
.schedule-hero {
  position: relative;
  height: 100vh; /* fecha na base do viewport (padrão de todos os heroes) */
  display: flex; align-items: center; overflow: hidden;
  background: var(--color-bg1);
}
.schedule-hero__content {
  position: relative; z-index: 1;
  max-width: var(--max-w); width: 100%; margin: 0 auto;
  padding: 0 var(--content-px-desk);
  /* O palco da marca saiu do content (absoluto no hero, 25vw) — aqui só
     resta o CTA, alinhado à direita. nowrap continua (histórico: com wrap
     o hero quebrava em empilhado nos vãos de largura). */
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 64px;
}
/* Palco da marca nascendo — ref. Claude Design "Abertura animada Tiix"
   Rodada 3 · variante 3B "vídeo na máscara": o vídeo só aparece POR DENTRO
   das letras (mask no SVG, ver index.html). Fundo TRANSPARENTE (pedido do
   Lucas): a marca nasce direto sobre o fundo da página, sem card — por isso
   também sem sombra/borda. */
.schedule-hero__brandstage {
  /* Metade esquerda do HERO full-width (não mais do container 1280): a
     marca, centrada por transform, crava EXATAMENTE em 25% do viewport
     (pedido do Lucas 2026-07-16). Filho direto do .schedule-hero
     (position:relative), fora do .schedule-hero__content. */
  position: absolute;
  /* top:var(--nav-h) (achado do Lucas 2026-07-28, não top:0): a foto
     (hero-brand-photo-wide.webp) tem quase zero margem acima das cabeças
     (o cabelo cacheado mais alto começa a ~6px do topo do arquivo) — com
     top:0 a caixa cobre 100vh e a nav fixa/transparente fica com a logo
     em cima da cabeça de alguém. Abrir esse respiro no topo cria uma
     faixa sem foto (mostra o bg escuro do próprio .schedule-hero) onde a
     nav vive sozinha, sem cortar nada novo da imagem (o "cover" só
     escala pra caber na caixa menor). */
  left: 0; top: var(--nav-h); bottom: 0;
  width: 50%;
  background: transparent;
}
/* Foto no lugar da marca animada (achado 2026-07-20, ver index.html) —
   preenche o palco inteiro (mesma caixa que a marca ocupava).
   2026-07-28 (pedido do Lucas: "troque essa img pela img que esta no tiix
   pro começar agora"): trocada pra hero-brand-photo-wide.webp (mesma foto
   usada em site-tiix-pro). Removido o scaleX(-1) — essa foto tem o iPhone
   visível (logo da Apple), espelhar ficaria com o logo ao contrário/quebrado.
   object-position 50% 15% replica o enquadramento do site-tiix-pro
   (modals/cadastro/signup.css, .audience-hero__photo img). */
.schedule-hero__brandphoto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
  /* scale(0.88) + transform-origin na base (achado do Lucas 2026-07-29,
     "ta corando a cabeça do homem, traga ela mais pra baixo"): a altura
     escalada pelo cover já bate EXATAMENTE com a altura da caixa (940px
     de foto ~ 692px de caixa, escala ~0.735 em ambos os casos), ou seja,
     zero sobra vertical — object-position não tem o que redistribuir
     (a foto já tem quase zero margem acima das cabeças, ~6px em 941px de
     altura original). Encolher a partir da BASE (origin 50% 100%) puxa o
     topo da imagem pra baixo, abrindo um respiro real acima da cabeça —
     como a foto tem fundo transparente (recorte das pessoas), o respiro
     revela o bg do próprio .schedule-hero (--color-bg1), sem costura
     visível. Lados também encolhem (escala uniforme), mas ali já sobrava
     bastante corte horizontal (a foto é bem mais larga que a caixa). */
  transform: scale(0.88);
  transform-origin: 50% 100%;
}
/* max-width em calc, não valor fixo (achado 2026-07-20): .schedule-hero__cta
   é alinhado à direita dentro de um container centrado de --max-w, enquanto
   .schedule-hero__brandstage ocupa 50% do VIEWPORT cheio (não do container)
   — os dois cálculos divergem e o resultado NÃO depende da largura da tela
   (o termo VW se cancela). Com max-width:560px o texto invadia ~72px da
   área da foto em QUALQUER largura de desktop (invisível com o logo antigo,
   fino e transparente; visível agora que a foto preenche o palco inteiro).
   A fórmula abaixo garante metade do container (onde a foto termina) menos
   o padding do content menos uma folga de 40px, sempre. */
.schedule-hero__cta { flex: 1 1 auto; max-width: calc(var(--max-w) / 2 - var(--content-px-desk) - 40px); }
/* Os dois títulos do hero ocupam a MESMA célula — o swap do cinema troca um
   pelo outro na mesma linha, sem movimento vertical (pedido do Lucas). */
.schedule-hero__titles { display: grid; }
.schedule-hero__titles > * { grid-area: 1 / 1; }
.schedule-hero__title {
  font-size: 56px;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -1.4px;
  color: var(--color-bg2);
}
/* o título dos passos nasce invisível; motion.js o traz da direita no swap */
.schedule-hero__title--steps { opacity: 0; pointer-events: none; }
.schedule-hero__subtitle {
  font-size: var(--fs-h3);
  color: var(--color-heading, #29343D);
  opacity: .72;
  margin: 16px 0 32px;
  max-width: 46ch;
}
.schedule-hero__download { justify-content: flex-start; }
/* Mobile/tablet: empilha o palco da marca em cima do CTA (sem o pin do
   cinema, que só roda ≥1024px — mesmo gate já usado no resto do arquivo).
   O palco volta pro FLUXO (no desktop é absoluto ancorado à esquerda). */
@media (max-width: 1023px) {
  /* padding-top: calc(var(--nav-h) + 24px) (achado do Lucas 2026-07-28, era
     56px fixo) — abaixo de 1024px a --nav-h vira 108px/84px conforme o
     breakpoint de 767px, e 56px ficava menor que a barra, deixando a logo
     por cima do topo da foto (mesmo bug do desktop, ver .schedule-hero__
     brandstage). Bottom mantém 56px, só o topo ganhou folga. */
  .schedule-hero { height: auto; padding: calc(var(--nav-h) + 24px) 0 56px; flex-direction: column; justify-content: center; }
  .schedule-hero__content { flex-direction: column; gap: 32px; text-align: center; }
  .schedule-hero__brandstage {
    position: relative; inset: auto;
    width: min(80vw, 340px);
    aspect-ratio: 4 / 5; /* sem isto o palco colapsa a 0 de altura */
    margin: 0 auto 8px;
  }
  .schedule-hero__cta { max-width: 100%; }
  .schedule-hero__download { justify-content: center; }
}

/* ===== SCHED-CINEMA: hero + passos numa sequência pinada ===== */
/* display:flex (2026-07-20): o ScrollTrigger congela a ALTURA do próprio
   .sched-cinema no momento em que cria o pin (medida ANTES da hero encolher
   pra 50vh na fase "swap") — depois que a hero encolhe, hero+next-steps
   somam menos que essa altura congelada, sobrando um vão vazio (fundo bege
   da página aparecendo) entre o fim do passo 3 e o footer subindo (bug
   relatado pelo Lucas). Com flex-direction:column, next-steps (flex:1)
   estica pra preencher SEMPRE o restante da caixa, não importa o que o pin
   tenha medido — não depende de recalcular o ScrollTrigger no meio do scrub. */
.sched-cinema { position: relative; overflow: hidden; display: flex; flex-direction: column; }
/* height:100vh SÓ desktop (achado 2026-07-20): sem isto o ScrollTrigger
   congela a altura do .sched-cinema medindo o FLUXO NATURAL no momento do
   pin — hero a 100vh (ainda não encolheu) + next-steps a 50vh (min-height)
   = 150vh de altura CONGELADA pro resto do scrub inteiro, bem maior que os
   100vh reais da tela. next-steps (flex:1) preenchia esse excesso todo
   (resolvia o vão vazio antes do footer — comentário abaixo), mas o
   conteúdo dos passos ficava centralizado numa caixa de ~50vh que só
   aparecia PELA METADE na tela real — sobrava sempre por baixo do viewport,
   read "textos aparecem muito baixo" (achado do Lucas). Travando o
   .sched-cinema em EXATOS 100vh, hero+next-steps somam sempre 100vh reais
   — sem sobra invisível, sem precisar recalcular nada no meio do scrub. */
@media (min-width: 1024px) {
  .sched-cinema { height: 100vh; }
}

/* Next Steps */
.next-steps {
  background: var(--color-bg3);
  padding: 40px 0 56px;
  /* overflow VISÍVEL: o título "Comece em 3 passos" sobe até o lugar do título
     do hero. Com overflow:hidden aqui ele era CORTADO (bug "sai da tela").
     O clipping do trilho horizontal foi movido p/ .steps-viewport. */
  overflow: visible;
  position: relative;
}
/* "Cortina" (pedido do Lucas 2026-07-20): next-steps NÃO preenche mais o
   resto do .sched-cinema (flex:1 saiu) — ela sobe como uma cortina, só até
   a altura que cabe o conteúdo do passo (motion.js mede scrollHeight e
   anima height 0→esse valor, junto com o encolhimento do hero). Sobra um
   respiro vazio (fundo da página) entre o fim da cortina e a base da tela
   — intencional, pedido explícito. overflow:hidden (era visible) pra o
   conteúdo não vazar antes da cortina crescer até a altura dele. Só
   desktop: é onde o cinema pinado roda. */
@media (min-width: 1024px) {
  .next-steps {
    box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: center;
    overflow: hidden;
    /* zera o padding vertical do mobile (achado 2026-07-20): 40px/56px
       assimétrico é o padding pensado pro empilhamento estático mobile —
       no desktop a cortina cresce pro tamanho exato do conteúdo, então
       esse padding só faria a caixa medida (scrollHeight) ficar maior que
       o necessário. */
    padding-block: 0;
  }
}
/* Só o trilho é clipado — não a seção inteira. */
.steps-viewport { overflow: hidden; }
.next-steps__title { will-change: transform; transform-origin: left top; position: relative; z-index: 2; }

/* trilho horizontal: 3 painéis lado a lado */
.steps-track {
  display: flex;
  will-change: transform;
}
.steps-track .next-step {
  flex: 0 0 100%;
  min-width: 100%;
  border-top: none;
  align-items: center;
  padding-top: 24px;
  padding-bottom: 24px;
}
.steps-track .next-step:last-child { border-bottom: none; }

/* sem motion (reduced/no-JS): passos empilham na vertical como antes */
@media (prefers-reduced-motion: reduce) {
  .steps-track { flex-direction: column; }
}
/* mobile/tablet: motion.js não cria o pin do cinema (gate de largura) —
   mesmo empilhamento vertical do reduced-motion. */
@media (max-width: 1023px) {
  .steps-track { flex-direction: column; }
}

/* ===== SCHED-OUTRO: vídeo scrubbed + footer ===== */
.sched-outro { position: relative; }
.next-steps__title {
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 var(--content-px-desk);
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--color-white);
  margin-bottom: 24px;
  max-width: 560px;
}
/* Desktop (pin ativo): o "Comece em 3 passos" visível é o swap-title DO HERO
   (.schedule-hero__title--steps, mesma linha/fonte do título principal) —
   este daqui some pra não duplicar. Mobile (sem pin) mantém este como
   heading normal da seção. */
@media (min-width: 1024px) {
  .next-steps__title { display: none; }
}
.next-step {
  max-width: var(--max-w); margin: 0 auto;
  padding: 50px var(--content-px-desk);
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  border-top: 1px solid rgba(255,255,255,0.10);
  align-items: center;
}
.next-step:last-child { border-bottom: 1px solid rgba(255,255,255,0.10); }
.next-step__number {
  font-size: clamp(100px, 15vw, 300px);
  font-weight: 200;
  letter-spacing: -0.05em;
  color: var(--color-white);
  line-height: 1.09;
}
/* TIPOGRAFIA DOS PASSOS — corrigida.
   Antes: nome 18px e descrição 14px. Dois problemas reais:
     · o nome era TAMANHO DE CORPO fazendo papel de título → salto de 16:1
       contra o número de 300px, sem nenhum degrau no meio (escala quebrada);
     · 14px está ABAIXO do mínimo de 16px p/ corpo em desktop, e ainda em
       branco a 60% sobre vermelho escuro → legibilidade ruim.
   Agora: nome vira título de verdade, corpo sobe p/ 18px com medida de
   leitura controlada (~46ch) e contraste maior. */
.next-step__name {
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--color-white);
  margin-bottom: 16px;
}
.next-step__desc {
  font-size: var(--fs-h3);           /* 18px — mínimo legível p/ corpo */
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);     /* era 0.60 — contraste insuficiente */
  max-width: 46ch;                   /* medida de leitura confortável */
}
.next-step__desc--lead {
  font-size: clamp(20px, 1.8vw, 24px);
  color: rgba(255,255,255,0.88);
}
.next-step__cta { margin-top: 28px; }

/* QR + badges DENTRO do passo 1 (o QR é o mecanismo do "baixe o app").
   Fica na coluna de conteúdo do grid 2-col que já existe → layout intacto. */
.step-download {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.step-download__qr img {
  width: 132px; height: 132px;
  background: var(--color-white);
  /* Borda fina cinza igual aos .store-badge (pedido do Lucas 2026-07-21): com
     o fundo do site branco, o quadro branco do QR sumia — a borda devolve a
     definição de card. */
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  padding: 10px;
  object-fit: contain;
}
.step-download__badges { display: flex; flex-direction: column; gap: 12px; }
.next-steps__cta {
  background: var(--color-bg3);
  padding: 64px 0;
  max-width: var(--max-w); margin: 0 auto;
  padding-left: var(--content-px-desk);
  padding-right: var(--content-px-desk);
  display: flex; align-items: center; gap: 32px;
}
.next-steps__cta-text {
  font-size: var(--fs-h1);
  font-weight: 500;
  letter-spacing: var(--ls-h1);
  color: var(--color-white);
}

/* =========================================================
   HOME — espelho da landing page_id=9 (WordPress/Elementor)
   Hero vídeo + vídeo vertical + grid 3x2 flip + frases/odômetro.
   ========================================================= */
/* Hero fecha na base do viewport (pedido 2026-07-15: todos os heroes com
   altura no limite da tela) — o vídeo passa a cobrir por object-fit. */
.hero-video { width: 100%; height: 100vh; position: relative; overflow: hidden; }
.hero-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font: inherit;
  cursor: pointer;
  opacity: .62;
  transform: translateX(-50%);
  animation: hero-cue-breathe 1.9s ease-in-out infinite;
}
.hero-scroll-cue svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-scroll-cue:focus-visible { outline: 2px solid #fff; outline-offset: 2px; opacity: 1; }
@keyframes hero-cue-breathe {
  0%, 100% { transform: translate(-50%, 0); opacity: .46; }
  50% { transform: translate(-50%, 5px); opacity: .8; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue { animation: none; }
}

/* SITE-10.1 — Motion asset "respiro".
   O HTML permanece semanticamente linear (hero → branco → grid) como fallback.
   Em desktop com motion habilitado, as três telas viram camadas do mesmo
   palco pinado; a duração é escolhida por data-motion-breath no container. */
.home-opening-sequence__stage { position: relative; }
.motion-breath__panel {
  width: 100%;
  min-height: 100svh;
  /* Degradê na BORDA que sobe, não na cor do painel (correção do Lucas
     2026-07-29, 3ª rodada: "respiro com degradê é entre o vídeo da hero e
     a section, o degradê sobe com o título Aqui, Agora!"). As tentativas
     anteriores coloriam o painel inteiro (fundo radial) — o pedido real é
     a MESMA técnica do .hero-white-rise do site-tiix-pro (js/hero-white-
     breath.js): em vez de um painel opaco com borda RETA subindo por cima
     do vídeo (o que o painel fazia até agora, via yPercent em
     motion-assets.js createBreath), o topo do painel esmaece pra
     transparente — o vídeo por trás aparece através da borda enquanto ela
     sobe, em vez de um corte seco. Mesmos stops/ângulo do gradiente da PRO
     (linear-gradient(0deg, ...) — 0% é a base do painel, 100% o topo).
     Sólido só até 62% (não 54% como na PRO) pra garantir folga acima da
     logo+tag centralizados (flex center) — na PRO o texto fica ancorado
     embaixo, aqui o conteúdo é centralizado e mais alto. */
  background: linear-gradient(0deg,
    #ffffff 0%,
    #ffffff 62%,
    rgba(255,255,255,.96) 70%,
    rgba(255,255,255,.72) 79%,
    rgba(255,255,255,.34) 88%,
    rgba(255,255,255,.08) 95%,
    transparent 100%);
  display: flex; align-items: center; justify-content: center;
}
@media (min-width: 1024px) {
  html.motion .home-opening-sequence__stage {
    height: 100vh;
    overflow: hidden;
    background: #000;
  }
  html.motion .home-opening-sequence__stage > .hero-video,
  html.motion .home-opening-sequence__stage > .motion-breath__panel,
  html.motion .home-opening-sequence__stage > .motion-breath__next {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  html.motion .home-opening-sequence__stage > .hero-video { z-index: 1; }
  html.motion .home-opening-sequence__stage > .motion-breath__panel {
    z-index: 2;
    min-height: 0;
    transform: translate3d(0, 100%, 0);
    will-change: transform;
  }
  html.motion .home-opening-sequence__stage > .motion-breath__next {
    z-index: 3;
    margin-left: 0;
    transform: translate3d(0, 100%, 0);
    will-change: transform;
  }
}

/* Bloco 1 — grid 3x2 (flip cards + vídeos) */
.tiix-wrap { width: 100vw; margin-left: calc(-50vw + 50%); overflow: hidden; position: relative; }

/* 2x100vh (pedido do Lucas 2026-07-20: grid preencher a tela inteira, sem
   faixa bege sobrando) — era altura fixa (400px), sobrava vão em qualquer
   viewport mais alto que 800px. */
.tiix-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 50vh); gap: 0; }
.tiix-cell { position: relative; overflow: hidden; }
.tiix-video-cell video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.tiix-flip { width: 100%; height: 100%; perspective: 1200px; cursor: pointer; }
.tiix-flip-inner { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.65s cubic-bezier(0.4, 0.2, 0.2, 1); }
@media (hover: hover) { .tiix-flip:hover .tiix-flip-inner { transform: rotateY(180deg); } }
.tiix-flip.flipped .tiix-flip-inner { transform: rotateY(180deg); }
.tiix-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tiix-back { transform: rotateY(180deg); }
.tiix-face-img { background: var(--color-bg1); display: flex; align-items: center; justify-content: center; padding: 40px; }
.tiix-face-img img { width: auto; height: auto; max-width: 70%; max-height: 70%; object-fit: contain; }
.tiix-face-text { background: var(--color-bg2); display: flex; align-items: center; padding: 40px 44px; }
.tiix-face-text p {
  font-family: var(--font); font-size: clamp(1.8rem, 3.8vw, 3.4rem); font-weight: 900;
  color: #fff; text-transform: uppercase; line-height: 1.1; letter-spacing: -0.01em; text-align: left; margin: 0;
}
.tiix-face-logo-back { background: var(--color-bg1); display: flex; align-items: center; justify-content: center; padding: 40px; }
.tiix-face-logo-back img { width: auto; height: auto; max-width: 65%; max-height: 65%; object-fit: contain; }
@media (max-width: 860px) { .tiix-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 300px); } }
@media (max-width: 520px) { .tiix-grid { grid-template-columns: 1fr; grid-template-rows: repeat(6, 280px); } }

/* Bloco 2 — frases (autoplay crossfade + odômetro). Era corredor de scroll
   de 800vh com painel fixed escapado pro body; convertido pra autoplay
   solto no fluxo normal da página (decisão do Lucas 2026-07-28, a partir do
   laboratório previews/site-11-home-autoplay.html, modo "A·Full" — troca
   sozinha por tempo, sem pinar o scroll): 2s de delay inicial + 4s de
   intervalo, crossfade por transição CSS (classe .is-active) acionada em
   home.js em vez de opacity calculada por progresso de scroll. */
.tp-wrap { width: 100vw; margin-left: calc(-50vw + 50%); }
.tp-outer { position: relative; }
.tp-panel {
  position: relative; width: 100%; height: 100vh; background: #fff;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.tp-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.1s cubic-bezier(.4, 0, .2, 1); will-change: opacity;
}
.tp-bg.is-active { opacity: 1; }
/* Camada de vídeo (tpBg0): mesmo enquadramento das camadas de imagem.
   Play/pause por home.js conforme vira ou deixa de ser a camada ativa. */
.tp-bg--video video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Scrim escurece o TOPO (onde o texto vive) e deixa o meio/baixo da foto
   limpos pra leitura da imagem. */
.tp-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.10) 40%, transparent 65%); }
.tp-phrase {
  /* Centro vertical via align-items:center do flex pai (.tp-panel).
     Crossfade + leve subida por transição CSS, disparada por home.js
     alternando .is-active — não mais transform inline calculado por frame. */
  position: absolute; left: 8%; width: 84%; max-width: 860px; text-align: left;
  /* teto 3.1rem (2026-07-20): em ≥1280px a 1ª linha de "Transformando a
     experiência" / "Agendar. Cuidar. Evoluir." estourava a caixa (860px)
     com 3.8rem — com 3.1rem cabe com folga em todas as 7 frases. */
  font-family: var(--font); font-size: clamp(1.5rem, 4.8vw, 3.1rem); font-weight: 900; color: #fff;
  text-transform: uppercase; line-height: 1.1; letter-spacing: -0.02em;
  opacity: 0; transform: translateY(28px) scale(0.96); pointer-events: none; margin: 0;
  transition: opacity 0.6s cubic-bezier(.33,1,.68,1), transform 0.6s cubic-bezier(.33,1,.68,1);
}
.tp-phrase.is-active { opacity: 1; transform: translateY(0) scale(1); }
/* #tp2 — o fundo do casal (site-opcao-4-casal.webp, background-position:50%
   25%) tem os dois sujeitos no centro da tela; texto sobe pro topo (céu/
   prédio vazio) onde o scrim já é mais escuro. */
#tp2 { top: 12%; }
@media (prefers-reduced-motion: reduce) {
  .tp-bg, .tp-phrase { transition: none; }
}
.tp-odo-wrap { display: block; margin-top: 1em; }
.tp-odo { display: inline-flex; align-items: flex-start; font-family: var(--font); font-weight: 900; font-size: clamp(1.05rem, 3vw, 2.6rem); color: #fff; letter-spacing: -0.02em; line-height: 1; }
.tp-odo-prefix { line-height: 1; margin-right: 0.04em; }
.tp-odo-digit { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; position: relative; }
.tp-odo-reel { display: flex; flex-direction: column; will-change: transform; }
.tp-odo-reel span { display: block; height: 1em; line-height: 1em; text-align: center; }
.tp-odo-label { display: block; margin-top: 0.35em; font-family: var(--font); font-weight: 700; font-size: clamp(0.5rem, 0.85vw, 0.75rem); color: rgba(255,255,255,0.68); text-transform: uppercase; letter-spacing: 0.14em; }
.tp-sub { display: block; font-size: clamp(0.9rem, 2.1vw, 1.8rem); font-weight: 700; margin-top: 0.45em; opacity: 0.85; text-transform: uppercase; }

/* =========================================================
   QUEM SOMOS  (manifesto de marca)
   ========================================================= */
/* Manifesto — abertura escura, tom premium */
/* Hero Quem Somos (2026-07-18, restaurado 2026-07-20 — Figma node 102:172) —
   logo TIIX com vídeo em máscara. Ver docs/2026-07-18-quem-somos-hero-design.md
   pro design validado. Substituiu por um dia o redesenho lado a lado (logo
   vermelha sólida + entrada "cai do preload") registrado em
   .claude/memory/DECISIONS.md (DEC-0031) — essa variante foi revertida. */
.qs-hero {
  /* Fundo vermelho (pedido do Lucas 2026-07-20, sobre a ref do Figma node
     102:172) — era bege (DEC-0021 original). Arco/traço (index.html) e
     texto invertem pro tom claro (--color-bg1) pra manter contraste, mesmo
     espírito de inversão bg1↔bg2 já usado em .nav--red. */
  background: var(--color-bg2);
  min-height: 100vh; /* fecha na base do viewport (padrão de todos os heroes) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding: 120px var(--content-px-desk);
  text-align: center;
  box-sizing: border-box;
}
.qs-hero__logo {
  display: block;
  width: min(60vw, 760px);
  height: auto;
  overflow: visible;
  /* Fix do glitch de vídeo reportado pelo Lucas: este SVG (foreignObject +
     mask + vídeo) é descendente de #smooth-content, que o ScrollSmoother
     transforma (translateY) a CADA frame de scroll. Bug já documentado
     (DEC-0023, .claude/memory/DECISIONS.md): mudar o transform de um
     ANCESTRAL de foreignObject+mask faz o browser não invalidar o raster
     da máscara de forma confiável — o retângulo do vídeo vaza pra fora do
     contorno das letras durante o movimento (mais visível agora com o
     auto-scroll novo, que garante scroll acontecendo com o vídeo ainda em
     tela). will-change:transform promove o SVG pra sua própria camada de
     composição (GPU) — a máscara fica isolada da transformação do
     ancestral, só a POSIÇÃO da camada muda, sem re-rasterizar o recorte.
     Mesmo padrão já usado em .brand-splash__logo (acima) pro mesmo tipo de
     proteção. */
  will-change: transform;
}
.qs-hero__video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  /* Fix da "linha fina de vídeo" nas bordas (reportado pelo Lucas 2026-07-21):
     o retângulo do vídeo preenche o foreignObject inteiro (object-fit:cover)
     e suas BORDAS antialiazam contra o fundo vermelho, deixando uma costura
     de ~1px em volta das letras. Piora com o scroll — o SVG é descendente do
     #smooth-content que o ScrollSmoother transforma a cada frame (DEC-0023),
     e o overflow:hidden do foreignObject NÃO recorta transform de forma
     confiável no Chrome, então a costura vaza nas laterais durante o
     movimento. clip-path recorta 4px de TODAS as bordas do vídeo — as letras
     ficam bem dentro do foreignObject (arco/haste/x têm folga de 10-26 unidades
     de viewBox até a borda), então nada de conteúdo é tocado, e nenhuma borda
     do retângulo encosta no limite → sem costura, estática ou em scroll. */
  clip-path: inset(4px);
}
@media (max-width: 1023px) {
  .qs-hero { padding: 96px 24px; gap: 32px; }
  .qs-hero__logo { width: min(78vw, 420px); }
}

/* O que é a Tiix — cream, duas colunas */
.qs-intro {
  background: var(--color-bg1);
  padding: clamp(40px, 5vw, 72px) 0;
}
.qs-intro__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--content-px-desk);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
/* Q2: logo vermelha inline antes de "Nascemos" — funciona como o "TIIX" da frase */
.qs-intro__logo {
  display: inline-block;
  height: 1.19em;
  width: auto;
  aspect-ratio: 460 / 248;
  fill: var(--color-black);
  vertical-align: middle;
  margin-right: -0.05em;
  position: relative;
  top: -0.3em;
}

.qs-intro__title {
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -1.4px;
  color: var(--color-black);
}
.qs-intro__body { display: flex; flex-direction: column; gap: 24px; }
.qs-intro__text {
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-black);
  opacity: 0.82;
}
/* Imagem editorial de apoio — atravessa as 2 colunas, mesmo enquadramento
   dos demais blocos de mídia do site (cover, cantos suaves). */
/* Foto do time: usa o .img-breaker (full-bleed, 625px, sem radius, parallax).
   Enquadramento ancorado em ESQUERDA-TOPO — é onde fica a logo TIIX da parede.
   O `cover` sempre descarta o lado oposto à âncora, então a marca nunca é a
   parte cortada:
     · desktop (razão do box > 1,5) → corta em baixo;
     · abaixo de ~937px            → passa a cortar à direita (não à esquerda).
   Com `center` a logo era decepada nas larguras menores. */
.qs-breaker img { object-position: left top; }

/* Missão + Visão — grid 2 colunas sobre vermelho (2026-07-20: era um
   carrossel horizontal com scroll-snap — como a navegação da página é
   scroll VERTICAL, "Visão" (2º card) nunca aparecia de verdade pra quem
   só rola pra baixo, precisava de um swipe horizontal manual. A própria
   animação de entrada (Q3, motion.js) já trata os dois cards como uma
   cascata que revela AMBOS juntos, então o layout tinha que ser lado a
   lado desde sempre — bug relatado: "a visão sumiu"). */
.qs-mv { background: #871312; padding: 0; overflow: hidden; }
.qs-mv__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  /* reduzido (pedido do Lucas 2026-07-20, "ataque o tamanho") — 96px/80px
     de padding/gap pra só 2 parágrafos curtos deixava o bloco inteiro
     (392px) desproporcional ao conteúdo. */
  padding: 64px var(--content-px-desk);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}
.qs-mv__card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
}
/* Q3: título de cada card (Missão / Visão) no mesmo padrão dos pilares.
   Era display:none — agora entra como heading pesado para estabelecer hierarquia. */
.qs-mv__label {
  display: block;
  font-size: clamp(32px, 3.4vw, 56px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -1.5px;
  color: var(--color-white);
  margin-bottom: 20px;
}
.qs-mv__text {
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: -0.3px;
  color: rgba(255,255,255,0.75);
  max-width: 72ch;
}

/* Valores — grid numerado. Reduzido (pedido do Lucas 2026-07-20, "ataque o
   tamanho") — 120px de padding de seção + min-height:200px por item deixava
   731px de altura pra só 6 frases de 2-4 palavras, quase o dobro do bloco
   Missão/Visão (392px) do lado, que carrega 2 parágrafos inteiros. */
.qs-values { background: var(--color-bg1); padding: 80px 0; }
.qs-values__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--content-px-desk);
}
.qs-values__title {
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--color-black);
  margin-bottom: 40px;
}
.qs-values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.qs-value {
  border-top: 1px solid var(--color-divider);
  padding: 24px 32px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 140px;
}
.qs-value__idx {
  font-size: var(--fs-p3);
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--color-bg2);
}
.qs-value__name {
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: -0.3px;
  color: var(--color-black);
  max-width: 20ch;
}

/* Pilares de método — opção 1 aprovada: boxes fechados que abrem como janela */
.qs-pillars { background: var(--color-bg3); padding: 120px 0; }
.qs-pillars__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--content-px-desk);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}
.qs-pillar {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  isolation: isolate;
  background: #370808;
  outline: 1px solid rgba(210,174,109,0.28);
}
.qs-pillar:focus-visible {
  outline: 3px solid #D2AE6D;
  outline-offset: 4px;
}
.qs-pillar__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.07);
  transition: transform 0.9s cubic-bezier(0.22,1,0.36,1);
}
.qs-pillar__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(55,8,8,0.08), rgba(55,8,8,0.42));
}
.qs-pillar__shutter {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(38px, 5vw, 72px);
  background: var(--color-bg3);
  color: var(--color-white);
  transform: translateY(0);
  transition: transform 0.9s cubic-bezier(0.22,1,0.36,1);
  box-shadow: 0 18px 48px rgba(0,0,0,0.22);
}
.qs-pillar__name {
  font-size: clamp(32px, 3.4vw, 56px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -1.5px;
  color: var(--color-white);
  margin-bottom: 24px;
}
.qs-pillar__name::after {
  content: "";
  display: block;
  width: 56px; height: 2px;
  background: #D2AE6D;
  margin-top: 24px;
}
.qs-pillar__desc {
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: rgba(255,255,255,0.72);
  max-width: 42ch;
}
/* SITE-07.1 — proposta contextual, ainda não promovida.
   Ocupa um viewport inteiro e reserva a área da topbar antes dos cards.
   Só entra com ?preview=qs-pillars-viewport e apenas no desktop; a rodada
   de responsividade continua adiada por decisão do Lucas. */
@media (min-width: 1024px) {
  html.preview-qs-pillars-viewport .qs-pillars {
    min-height: 100vh;
    min-height: 100svh;
    padding: calc(var(--nav-h) + clamp(32px, 5vh, 56px)) 0 clamp(48px, 7vh, 76px);
    display: flex;
    align-items: center;
  }
  html.preview-qs-pillars-viewport .qs-pillars__inner { width: 100%; }
}
@media (hover: hover) and (min-width: 1024px) {
  .qs-pillar:hover .qs-pillar__shutter,
  .qs-pillar:focus .qs-pillar__shutter { transform: translateY(-100%); }
  .qs-pillar:hover .qs-pillar__image,
  .qs-pillar:focus .qs-pillar__image { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .qs-pillar__image,
  .qs-pillar__shutter { transition: none; }
}

/* CTA de transição */
.qs-cta { background: var(--color-bg2); padding: 96px 0; }
.qs-cta__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--content-px-desk);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}
.qs-cta__text {
  font-size: clamp(24px, 2.6vw, 40px);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--color-white);
  max-width: 20ch;
}

.store-badge {
  display: flex; align-items: center; gap: 12px;
  background: var(--color-white);
  /* Borda fina cinza (pedido do Lucas 2026-07-21): com o fundo do site agora
     branco (--color-bg1), o card branco do badge sumia. A borda devolve a
     definição de card/botão sem sombra pesada. */
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  padding: 10px 22px 10px 16px;
  min-width: 200px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.store-badge:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.28); }
.store-badge__icon { width: 28px; height: 28px; flex-shrink: 0; color: var(--color-black); }
.store-badge__txt { display: flex; flex-direction: column; line-height: 1.15; }
.store-badge__txt small { font-size: 10px; color: rgba(0,0,0,.60); }
.store-badge__txt strong { font-size: 17px; font-weight: 600; color: var(--color-black); letter-spacing: -0.3px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1023px) {
  :root {
    --content-px-desk: var(--content-px-tab);
    --fs-hero: 80px;
    --fs-d3:   56px;
  }
  .welcome__inner { grid-template-columns: 1fr; gap: 24px; }
  .offering__inner { grid-template-columns: 1fr; }
  .footer__contact { grid-template-columns: 1fr 1fr; }
  .stats__inner { grid-template-columns: 1fr; gap: 32px; }
  /* Centralizado (pedido do Lucas 2026-07-28: "alinhamento central" em
     todo texto do mobile) — era text-align:left !important pro 1º/último
     stat (alinhados com a logo/número nas pontas via .stat__pre-logo/
     .stat__number :first-child/:last-child, ver linhas ~1024-1029); no
     mobile essas regras de ponta também voltam pro centro abaixo. */
  .stat { text-align: center !important; padding: 0; }
  .stat:first-child .stat__pre-logo,
  .stat:last-child .stat__pre-logo {
    left: 50%; right: auto; transform: translate(-50%, -50%) scale(0.7);
  }
  .stat:first-child .stat__number,
  .stat:last-child .stat__number {
    left: 50%; right: auto; transform: translate(-50%, -50%) rotateY(-90deg);
  }
  .stat:first-child .stat__number.is-counting,
  .stat:last-child .stat__number.is-counting {
    transform: translate(-50%, -50%) rotateY(0deg);
  }
  /* Passos empilhados de verdade (era 2 colunas número|conteúdo lado a
     lado mesmo no mobile) — número em cima, conteúdo centralizado embaixo. */
  .next-step {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 16px;
  }
  .qs-intro__inner,
  .qs-mv__inner,
  .qs-pillars__inner { grid-template-columns: 1fr; gap: 40px; }
  .qs-pillar {
    aspect-ratio: auto;
    overflow: visible;
    background: transparent;
    outline: 0;
  }
  .qs-pillar__image,
  .qs-pillar__veil { display: none; }
  .qs-pillar__shutter {
    position: relative;
    padding: 0;
    background: transparent;
    transform: none;
    box-shadow: none;
    align-items: center;
    text-align: center;
  }
  .qs-values__grid { grid-template-columns: repeat(2, 1fr); }

  /* ===== Texto centralizado no mobile (pedido do Lucas 2026-07-28) =====
     Cobre título/parágrafo/legenda em todas as páginas — inclusive onde o
     desktop usa esquerda/direita (services-hero, .stat, form). Containers
     flex/grid ganham align-items:center junto, senão o texto centraliza
     mas a CAIXA continua ancorada numa ponta. */
  .tiix-face-text { justify-content: center; }
  .tiix-face-text p { text-align: center; }
  .tp-phrase { left: 0; width: 100%; padding: 0 24px; text-align: center; }
  .tp-odo-label,
  .tp-sub { text-align: center; }
  .footer__copyright { text-align: center; }
  .services-hero__content {
    left: 0; right: 0;
    align-items: center;
    text-align: center;
    padding: 0 var(--content-px-tab);
  }
  /* Pedido do Lucas 2026-07-28: "o video com o celular pode ser maior" —
     no mobile o vídeo (1920x1080, object-fit:contain) encolhia bastante
     porque a caixa é estreita/alta; scale + transform-origin left bottom
     aumenta sem recortar a base (.services-hero-wrap tem overflow:visible). */
  .silk-phone__fg {
    transform: scale(1.5);
    transform-origin: left bottom;
  }
  .qs-intro__title,
  .qs-intro__text { text-align: center; }
  .qs-mv__card { align-items: center; text-align: center; }
  .qs-values__title { text-align: center; }
  .qs-value { align-items: center; text-align: center; }
  .qs-pillar__name,
  .qs-pillar__desc { text-align: center; }
  .next-steps__title { text-align: center; }
  .next-step__desc,
  .next-step__desc--lead { margin-left: auto; margin-right: auto; }
  .signup-panel legend,
  .field label,
  .field__message { text-align: center; }
}
@media (max-width: 767px) {
  .qs-values__grid { grid-template-columns: 1fr; }
  .qs-value { min-height: 0; padding-right: 0; }
  .qs-cta__inner { flex-direction: column; align-items: center; text-align: center; }
  :root {
    --content-px-desk: var(--content-px-mob);
    --fs-hero: 48px;
    --fs-d3:   36px;
    --ls-hero: -1.44px;
  }
  .hero { height: 600px; }
  .footer__contact { grid-template-columns: 1fr; }
  .next-steps__cta { flex-direction: column; align-items: center; text-align: center; }
}