/* =============================================================================
* ZELO · SISTEMA DE DESIGN · css/zelo-site.css · COMPONENTES SÓ DO SITE
*
* Carregado SÓ pelo site (páginas públicas, geradas e a landing) e pelo guia
* vivo (app/sistema.html), SEMPRE DEPOIS de css/zelo.css. O app não carrega
* este arquivo. Não declara camadas nem tokens: usa a ordem de camadas e os
* tokens do zelo.css, e escreve tudo em @layer componentes.
*
* SISTEMA.md §10.6 (site), §10.8 (o iPhone em CSS), §13.1 (regras comuns) e
* §8.7 (coreografias do site). O que o site usa e também é do app (botão,
* chip, campo herói, código de acesso, ênfase) mora no zelo.css; aqui entra
* só variante própria (.z-chips--site, .z-chip--model).
*
* Regras que valem para tudo aqui:
* - Valores só por token (--sys-*, ou --cmp-* declarado na raiz do
* componente). Cor, tempo, raio, sombra, z-index e font-size nunca
* literais. Pontos de quebra: 360 · 410 · 600 · 1024 · 1280 · 1680.
* - Fundo de texto sempre sólido. Vidro só em pseudo-elemento (a sonda do
* test-responsivo lê rgba como opaco e pula background-image).
* - Os ganchos que a bancada mede ficam no markup ao lado das z-
* (.btn, .site-brand, .site-nav a, .chips a, .model-grid a, .faq summary,
* .site-foot nav a, plan-table). Este arquivo estiliza pelas z-.
* - Nada começa invisível fora da primeira tela. A revelação por rolagem só
* existe com html.motion-armed (rolagem humana) e nunca mexe em opacidade.
* - Só transform e opacity animam. Distância e escala multiplicadas por
* --motion (0 com movimento reduzido: sobra a fusão).
* ============================================================================= */
@layer componentes {
/* ---------------------------------------------------------------------------
* Margem lateral do site com área segura (raiz de todo componente que alinha
* com a coluna).
* ------------------------------------------------------------------------- */
.z-wrap, .z-globalnav, .z-localnav, .z-gallery, .z-footer, .z-docgrid, .z-chips--site {
--cmp-site-gutter: max(var(--sys-site-gutter), env(safe-area-inset-left), env(safe-area-inset-right));
}
/* ---------------------------------------------------------------------------
* .z-section · faixa de página. Fundos só branco, #F5F5F7 e a preta da IA.
* Nunca duas --alt seguidas (regra de markup). Duas lisas seguidas não somam
* o respiro: a de baixo começa sem padding de cima.
* ------------------------------------------------------------------------- */
.z-section {
container: secao / inline-size; /* os componentes de dentro respondem à faixa, não à janela */
padding-block: var(--sys-site-section);
background: var(--sys-bg-plain);
color: var(--sys-label);
}
.z-section--plain { background: var(--sys-bg-plain); }
/* Cartão na seção alternada: a superfície elevada (branca no claro,
#2C2C2E no escuro). Com a superfície comum, no escuro o cartão #1C1C1E
sumia na seção #161617 (1,06:1). */
.z-section--alt { --sys-card: var(--sys-surface-elevated); background: var(--sys-bg-alt); }
/* A seção da IA é preta nos dois temas. O markup leva data-theme="dark" para
* a subárvore resolver os tokens escuros (tinta #3BCFA3, superfície #1C1C1E).
* O texto é remapeado aqui também, para o caso de faltar o atributo. */
.z-section--inverse {
--sys-label: var(--sys-label-inverse);
--sys-label-2: var(--sys-label-inverse-2);
--sys-card: var(--sys-surface);
background: var(--sys-bg-inverse);
color: var(--sys-label-inverse);
}
.z-section:not(.z-section--alt):not(.z-section--inverse)
+ .z-section:not(.z-section--alt):not(.z-section--inverse) {
padding-block-start: 0;
}
/* No escuro a faixa da IA e a lisa são o mesmo preto: lado a lado, elas
* também não somam o respiro (senão sobram 320 px de preto contínuo). */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .z-section--inverse + .z-section:not(.z-section--alt),
:root:not([data-theme="light"]) .z-section:not(.z-section--alt) + .z-section--inverse {
padding-block-start: 0;
}
}
:root[data-theme="dark"] .z-section--inverse + .z-section:not(.z-section--alt),
:root[data-theme="dark"] .z-section:not(.z-section--alt) + .z-section--inverse {
padding-block-start: 0;
}
/* Herói: começa mais perto da barra (48 → 96). */
.z-section--hero { padding-block-start: calc(var(--sys-site-block) * 1.5); }
/* Âncora não some embaixo da barra local que gruda. */
.z-section[id], .z-anchor { scroll-margin-block-start: var(--cmp-localnav-real, var(--sys-site-localnav-h)); }
/* Coluna: texto 692 · site 980 · larga 1200 · palco 1680. */
/* A margem tem piso: um quarto do que sobra fora da coluna do site (980).
A 1280 a coluna larga começava a 43 px da janela enquanto barra e texto
ficavam a 150; agora começa a 75, a meio caminho. A 1440 e acima a
largura de 1200 já garante a margem, e no celular vale a margem lateral. */
.z-wrap {
--cmp-wrap: var(--sys-measure-wide);
inline-size: min(100% - 2 * max(var(--cmp-site-gutter), (100% - var(--sys-measure-site)) / 4), var(--cmp-wrap));
margin-inline: auto;
}
.z-wrap--text { --cmp-wrap: var(--sys-measure-text); }
.z-wrap--site { --cmp-wrap: var(--sys-measure-site); }
.z-wrap--stage { --cmp-wrap: var(--sys-measure-stage); }
/* Título à esquerda, conteúdo à direita (FAQ, problema): 4 + 8 a partir de
* 64rem DE FAIXA (a seção é o contêiner: no guia e numa coluna estreita o
* split empilha, como faria numa janela daquele tamanho). A coluna do título
* nunca fica menor que 18rem: a maior palavra do título cabe inteira.
* Os filhos aceitam encolher (min-inline-size 0): a palavra longa quebra no
* fim da linha em vez de empurrar a página para o lado. */
.z-split { display: grid; gap: var(--sys-site-block); }
.z-split > * { min-inline-size: 0; }
.z-split > .z-headline { margin-block-end: 0; }
@container secao (width >= 64rem) {
.z-split {
grid-template-columns: minmax(18rem, 4fr) minmax(0, 8fr);
column-gap: var(--sys-space-24);
align-items: start;
}
.z-split > .z-headline { text-align: start; }
.z-split > .z-headline .z-headline__title {
--cmp-headline-size: clamp(2rem, 1.4718rem + 2.2535vw, 3.5rem); /* display-l */
font: var(--sys-type-display-l);
font-size: min(var(--cmp-headline-size), var(--cmp-headline-cap));
letter-spacing: calc(var(--sys-track-display) * var(--sys-track-on));
}
.z-split > .z-headline :is(.z-headline__title, .z-headline__lede) { margin-inline: 0; }
}
/* ---------------------------------------------------------------------------
* .z-headline · eyebrow (um por página, só no herói), título, introdução
* cinza com até duas frases em preto, ações e nota. Centrado por padrão.
* ------------------------------------------------------------------------- */
.z-headline { margin-block-end: var(--sys-site-block); text-align: center; min-inline-size: 0; }
.z-headline--start { text-align: start; }
.z-eyebrow {
margin: 0 0 var(--sys-space-12);
font: var(--sys-type-eyebrow);
letter-spacing: calc(var(--sys-track-site-body) * var(--sys-track-on));
color: var(--sys-tint);
}
/* Com texto grande (200%) o display passava da largura do celular e a
palavra mais longa ("Manutenção") partia no meio. O tamanho tem um teto
na largura da faixa (cqi): no tamanho normal o teto nunca é alcançado
(o display a 390 é menor que ele); com texto grande, o título encolhe até
a palavra caber. --cmp-headline-size repete o tamanho do token do display
(o token é um font abreviado, sem o tamanho separado). */
.z-headline__title {
--cmp-headline-size: clamp(2.5rem, 1.6197rem + 3.7559vw, 5rem); /* display-xl */
--cmp-headline-cap: 11cqi;
margin: 0 auto;
max-inline-size: var(--sys-measure-site);
font: var(--sys-type-display-xl);
font-size: min(var(--cmp-headline-size), var(--cmp-headline-cap));
letter-spacing: calc(var(--sys-track-display) * var(--sys-track-on));
color: var(--sys-label);
text-wrap: balance;
hyphens: auto;
}
/* Título de duas frases: cada uma numa linha, e cada uma balanceia sozinha.
* Um deixava a segunda frase com palavra órfã no celular. */
.z-headline__frase { display: block; text-wrap: balance; }
.z-headline--hero .z-headline__title {
--cmp-headline-size: clamp(3rem, 1.9437rem + 4.507vw, 6rem); /* display-xxl */
--cmp-headline-cap: 13cqi;
font: var(--sys-type-display-xxl);
font-size: min(var(--cmp-headline-size), var(--cmp-headline-cap));
letter-spacing: calc(var(--sys-track-display) * var(--sys-track-on));
hanging-punctuation: first;
}
/* Nas páginas com
display L, um título de seção em display XL (o
fecho) tem teto menor que o do h1: com texto a 200% os dois paravam nos
mesmos 11cqi e o h2 ficava do tamanho do título da página. */
html:has(.z-headline--page) h2.z-headline__title { --cmp-headline-cap: 10cqi; }
/* Página de modelo, guia, índice: display L (32 → 56). */
.z-headline--page .z-headline__title {
--cmp-headline-size: clamp(2rem, 1.4718rem + 2.2535vw, 3.5rem); /* display-l */
font: var(--sys-type-display-l);
font-size: min(var(--cmp-headline-size), var(--cmp-headline-cap));
letter-spacing: calc(var(--sys-track-display) * var(--sys-track-on));
}
.z-headline__lede {
margin: var(--sys-site-title-gap) auto 0;
max-inline-size: var(--sys-measure-text);
font: var(--sys-type-lede);
letter-spacing: calc(var(--sys-track-lede) * var(--sys-track-on));
color: var(--sys-label-2);
text-wrap: pretty;
}
.z-headline__lede :is(b, strong) { font-weight: 600; color: var(--sys-label); }
/* Centrada, a introdução balanceia: com pretty a última linha ficava com
uma ou duas palavras sozinhas no meio ("motor dele."). Alinhada à
esquerda (--start, ou na coluna do split) continua pretty. */
.z-headline:not(.z-headline--start, .z-split > *) .z-headline__lede { text-wrap: balance; }
.z-headline--start :is(.z-headline__title, .z-headline__lede) { margin-inline: 0; }
.z-headline__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--sys-space-12) var(--sys-space-24);
margin-block-start: var(--sys-space-32);
}
.z-headline--start .z-headline__actions { justify-content: flex-start; }
.z-headline__note {
margin: var(--sys-space-16) 0 0;
font: var(--sys-type-site-small);
letter-spacing: calc(var(--sys-track-site-small) * var(--sys-track-on));
color: var(--sys-label-2);
}
/* ---------------------------------------------------------------------------
* .z-globalnav · barra global. 48 de altura, NÃO gruda (sai com a rolagem,
* como na apple.com). Vidro só depois de 8 px, num pseudo. Abaixo de 600:
* marca, botão e menu de tela cheia num (funciona sem JS).
* Alvos: .site-brand e .site-nav a com caixa de 44.
* ------------------------------------------------------------------------- */
.z-globalnav {
--cmp-globalnav-h: var(--sys-site-nav-h);
container: globalnav / inline-size; /* links em linha a partir de 45rem de barra; com texto grande, o menu */
position: relative;
z-index: var(--sys-z-nav);
color: var(--sys-label);
font: var(--sys-type-site-small);
letter-spacing: calc(var(--sys-track-site-small) * var(--sys-track-on));
}
.z-globalnav::before {
content: "";
position: absolute;
inset: 0;
background: var(--sys-material-chrome);
-webkit-backdrop-filter: var(--sys-material-filter);
backdrop-filter: var(--sys-material-filter);
border-block-end: 0.5px solid var(--sys-separator);
opacity: 0;
pointer-events: none;
}
@supports (animation-timeline: scroll()) {
.z-globalnav::before {
animation: z-reveal both;
animation-timeline: scroll(root);
animation-range: 0 var(--sys-space-8);
}
}
.z-globalnav__in {
position: relative; /* por cima do vidro do pseudo */
z-index: var(--sys-z-raised);
display: flex;
align-items: center;
gap: var(--sys-space-4);
block-size: var(--cmp-globalnav-h);
inline-size: min(100% - 2 * var(--cmp-site-gutter), var(--sys-measure-site));
margin-inline: auto;
}
.z-globalnav__brand {
display: inline-flex;
align-items: center;
gap: var(--sys-space-6);
min-block-size: var(--sys-target);
padding-inline-end: var(--sys-space-8);
color: var(--sys-label);
font: var(--sys-type-headline);
letter-spacing: calc(var(--sys-track-headline) * var(--sys-track-on));
text-decoration: none;
}
.z-globalnav__brand .z-ic {
--cmp-ic-size: var(--sys-icon-20);
color: var(--sys-tint);
}
.z-globalnav__links { display: none; }
.z-globalnav__links a {
display: inline-flex;
align-items: center;
min-block-size: var(--sys-target);
padding-inline: var(--sys-space-12);
color: var(--sys-label);
text-decoration: none;
transition: color var(--sys-dur-fade) var(--sys-ease-fade);
}
.z-globalnav__links a[aria-current="page"] { font-weight: 600; }
.z-globalnav__links a:is(:focus-visible, .is-focused) { outline: var(--sys-focus-width) solid var(--sys-focus); outline-offset: var(--sys-focus-offset-inset); border-radius: var(--sys-radius-tag); }
.z-globalnav__cta { flex: none; }
/* Quem empurra botão e menu para a borda direita é a MARCA: com o botão
escondido (barra local na página, ou barra estreita), a margem que morava
nele sumia junto e o menu ficava colado na marca. A partir de 45rem as
âncoras crescem (flex: 1) e a margem não sobra. */
.z-globalnav__brand { margin-inline-end: auto; }
/* Com barra local na página, o botão do app fica só nela, em qualquer
largura (um botão por tela, como na apple.com); o menu continua com o
link. */
html:has(.z-localnav) .z-globalnav__cta { display: none; }
/* Barra estreita para o texto (20rem cresce com ele: a 360 com texto a 200%
marca, botão e menu não cabem): o link do app fica só no menu. */
@container globalnav (width < 20rem) { .z-globalnav__cta { display: none; } }
/* Menu de tela cheia (celular). O resumo é o botão de 44 do menu. */
.z-globalnav__menu > summary {
display: grid;
place-items: center;
inline-size: var(--sys-target);
block-size: var(--sys-target);
margin-inline-end: calc(-1 * var(--sys-space-8));
border-radius: var(--sys-radius-full);
color: var(--sys-label);
list-style: none;
cursor: pointer;
}
.z-globalnav__menu > summary::-webkit-details-marker { display: none; }
.z-globalnav__menu > summary .z-ic { --cmp-ic-size: var(--sys-icon-22); }
.z-globalnav__menu:not([open]) .z-globalnav__fechar,
.z-globalnav__menu[open] .z-globalnav__abrir { display: none; }
/* Marca, botão e resumo ficam por cima da folha do menu. */
.z-globalnav__brand, .z-globalnav__cta, .z-globalnav__menu > summary {
position: relative;
z-index: var(--sys-z-raised);
}
.z-globalnav__sheet {
position: fixed;
inset: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding: calc(var(--cmp-globalnav-h) + var(--sys-space-24)) var(--cmp-site-gutter) var(--sys-space-48);
background: var(--sys-material-solid);
color: var(--sys-label);
}
.z-globalnav__sheet ul { margin: 0; padding: 0; list-style: none; }
.z-globalnav__sheet a {
display: flex;
align-items: center;
min-block-size: var(--sys-target);
padding-block: var(--sys-space-4);
color: var(--sys-label);
font: var(--sys-type-site-title-2);
letter-spacing: calc(var(--sys-track-site-title) * var(--sys-track-on));
text-decoration: none;
}
/* Anel arredondado, como o das âncoras da barra larga e o do app (o
padrão deixava um retângulo de cantos vivos da margem até a borda). */
.z-globalnav__sheet a:is(:focus-visible, .is-focused) { outline: var(--sys-focus-width) solid var(--sys-focus); outline-offset: var(--sys-focus-offset-inset); border-radius: var(--sys-radius-tag); }
.z-globalnav__menu[open] .z-globalnav__sheet li {
animation: z-cai var(--sys-dur-smooth) var(--sys-ease-smooth) backwards;
animation-delay: calc(var(--i, 0) * var(--sys-stagger));
}
.z-globalnav__sheet li:nth-child(2) { --i: 1; }
.z-globalnav__sheet li:nth-child(3) { --i: 2; }
.z-globalnav__sheet li:nth-child(4) { --i: 3; }
.z-globalnav__sheet li:nth-child(5) { --i: 4; }
.z-globalnav__sheet li:nth-child(n+6) { --i: 5; }
html:has(.z-globalnav__menu[open]) { overflow: hidden; }
@container globalnav (width >= 45rem) {
/* Três colunas: as âncoras ficam no centro da PÁGINA, com ou sem o botão
à direita (nas páginas com barra local ele não aparece). */
.z-globalnav__in { display: grid; grid-template-columns: 1fr auto 1fr; }
.z-globalnav__brand { justify-self: start; }
.z-globalnav__links { display: flex; grid-column: 2; justify-content: center; gap: var(--sys-space-8); min-inline-size: 0; }
.z-globalnav__cta { grid-column: 3; justify-self: end; }
.z-globalnav__menu { display: none; }
/* As âncoras ficam no centro em TODA página, com barra local ou sem: na
troca de página elas não pulam de lugar. Com barra local o botão do
app mora nela e a terceira coluna fica vazia. */
}
/* ---------------------------------------------------------------------------
* .z-localnav · barra local. 52, gruda no topo, vidro num pseudo com fio.
* Nome da página, âncoras e botão S cheio, sobre fundo opaco. A barra é o próprio contêiner:
* abaixo de 45rem de barra (ou com texto grande) as âncoras moram num
* que abre com o chevron (só o ícone, com aria-label). A
* partir de 45rem o mesmo mostra as âncoras em linha
* (::details-content). Sem esse suporte, continua sendo um menu que abre:
* nada fica inacessível. O nome encolhe com reticências antes de encostar
* nas âncoras; o botão nunca encolhe.
* ------------------------------------------------------------------------- */
.z-localnav {
--cmp-localnav-h: var(--sys-site-localnav-h);
container: localnav / inline-size;
position: sticky;
top: 0;
z-index: var(--sys-z-sticky);
color: var(--sys-label);
}
/* Fundo OPACO (o material sólido): a barra gruda por cima de listas,
tabelas e do iPhone do herói, e o vidro deixava a frase de baixo legível
ao lado do nome e do botão (sem desfoque, as duas se misturavam). */
.z-localnav::before {
content: "";
position: absolute;
inset: 0;
background: var(--sys-material-solid);
border-block-end: 0.5px solid var(--sys-separator);
pointer-events: none;
transition: background-color var(--sys-dur-exit) var(--sys-ease-fade), border-color var(--sys-dur-exit) var(--sys-ease-fade);
}
/* Sobre a faixa preta da IA o script da página põe data-theme="dark" na
barra: os tokens resolvem o material escuro, a tinta e o rótulo, e a
barra clara não atravessa o preto como uma tira cinza. A troca funde. */
.z-localnav :is(.z-localnav__title, .z-localnav__more > summary) {
transition: color var(--sys-dur-exit) var(--sys-ease-fade);
}
.z-localnav[data-theme] { background-color: transparent; }
.z-localnav__in {
position: relative; /* por cima do vidro do pseudo */
z-index: var(--sys-z-raised);
display: flex;
align-items: center;
gap: var(--sys-space-8);
min-block-size: var(--cmp-localnav-h);
inline-size: min(100% - 2 * var(--cmp-site-gutter), var(--sys-measure-site));
margin-inline: auto;
}
.z-localnav__title {
display: block;
flex: 0 1 auto;
min-block-size: var(--sys-target);
min-inline-size: var(--sys-target);
overflow: hidden;
color: var(--sys-label);
font: var(--sys-type-site-title-3);
font-weight: 700;
line-height: var(--sys-target);
letter-spacing: calc(var(--sys-track-site-title) * var(--sys-track-on));
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
}
.z-localnav__more { flex: none; margin-inline: calc(-1 * var(--sys-space-8)) auto; }
.z-localnav__more > summary {
display: grid;
place-items: center;
inline-size: var(--sys-target);
block-size: var(--sys-target);
color: var(--sys-label);
list-style: none;
cursor: pointer;
}
.z-localnav__more > summary::-webkit-details-marker { display: none; }
.z-localnav__more > summary:is(:focus-visible, .is-focused) { outline: var(--sys-focus-width) solid var(--sys-focus); outline-offset: var(--sys-focus-offset-inset); border-radius: var(--sys-radius-full); }
.z-localnav__more > summary .z-ic {
--cmp-ic-size: var(--sys-icon-16);
transition: transform var(--sys-dur-snappy) var(--sys-ease-snappy);
}
.z-localnav__more[open] > summary .z-ic { transform: rotate(180deg); }
.z-localnav__links {
position: absolute;
inset-inline: calc(-1 * var(--cmp-site-gutter));
inset-block-start: 100%;
margin: 0;
padding: var(--sys-space-8) var(--cmp-site-gutter) var(--sys-space-16);
list-style: none;
background: var(--sys-material-solid);
border-block-end: 0.5px solid var(--sys-separator);
}
/* Menu da barra local aberto: um véu escurece a página por baixo, como na
apple.com. Sem ele o painel (material sólido) se fundia com a seção cinza
logo abaixo, separado só pelo fio. A barra sobe ao degrau da barra do
topo para ficar por cima do véu; o véu fica por cima do conteúdo (nada
em passa de --sys-z-raised). O toque no véu fecha o menu (script da página). Na
barra larga (âncoras em linha) o resumo some e o menu não abre. */
html:has(.z-localnav__more[open]) .z-localnav { z-index: var(--sys-z-header); }
html:has(.z-localnav__more[open]) body::after {
content: "";
position: fixed;
inset: 0;
z-index: var(--sys-z-sticky);
background: var(--sys-scrim-sheet-tablet);
animation: z-reveal var(--sys-dur-fade) var(--sys-ease-fade) both;
}
.z-localnav__links a {
display: flex;
align-items: center;
min-block-size: var(--sys-target);
color: var(--sys-label);
font: var(--sys-type-site-body);
letter-spacing: calc(var(--sys-track-site-body) * var(--sys-track-on));
text-decoration: none;
}
.z-localnav__links a[aria-current] { color: var(--sys-tint-ink); }
.z-localnav__links a:is(:focus-visible, .is-focused) { outline: var(--sys-focus-width) solid var(--sys-focus); outline-offset: var(--sys-focus-offset-inset); border-radius: var(--sys-radius-tag); }
/* O botão fica numa linha e não encolhe; só com texto grande, quando passaria
de 55% da barra, o rótulo quebra em vez de empurrar a página. */
.z-localnav__cta { flex: none; max-inline-size: 55%; }
/* Enquanto um botão cheio de seção está na tela (o script da página marca
html.cta-na-tela), o da barra fica tingido: uma ação primária por tela. */
html.cta-na-tela .z-localnav__cta {
--cmp-btn-bg: var(--sys-tint-wash);
--cmp-btn-fg: var(--sys-tint-ink);
--cmp-btn-bg-hover: var(--sys-tint-wash-pressed);
--cmp-btn-bg-pressed: var(--sys-tint-wash-pressed);
}
/* Barra estreita (celular): o nome em Headline, como o título da barra do
iPhone, para caber "Toyota RAV4" ao lado do chevron e do botão. */
@container localnav (width < 30rem) {
/* A 360 o nome ("Toyota RAV4") cabe inteiro: espaços de 4 e o botão com
12 de lado, em vez de cortar o nome com reticências. */
.z-localnav__in { gap: var(--sys-space-4); }
.z-localnav .z-localnav__cta { --cmp-btn-pad-x: 12px; }
.z-localnav__title {
font: var(--sys-type-headline);
line-height: var(--sys-target);
letter-spacing: calc(var(--sys-track-headline) * var(--sys-track-on));
}
}
/* A 320 (a barra tem 20rem, por isso o <=) os 55% não cabem "Gerar o meu
plano" e o botão quebrava em duas linhas (60 de altura). Aqui ele pode
ocupar tudo o que sobra do nome e do chevron nos 44 mínimos de cada um:
quem cede é o nome, que já tem reticências. Com texto grande o rótulo
continua quebrando, sem empurrar a página. */
@container localnav (width <= 20rem) {
.z-localnav .z-localnav__cta {
--cmp-btn-pad-x: 10px;
max-inline-size: calc(100% - 2 * var(--sys-target) - 2 * var(--sys-space-4));
}
}
/* O cromo da barra para de crescer em XXXL (--u-chrome, como a cápsula de
abas do app): com texto a 200% o nome e o botão cresciam até o nome sair
da barra e o chevron ficar sozinho ao lado do botão. Agora o nome fica,
com reticências se faltar lugar. */
.z-localnav__title {
--cmp-localnav-title: clamp(1.3125rem, 1.2465rem + 0.2817vw, 1.5rem); /* o tamanho do site-title-3 */
font-size: min(var(--cmp-localnav-title), calc(24 * var(--u-chrome)));
}
.z-localnav .z-localnav__cta { font-size: calc(15 * var(--u-chrome)); }
@container localnav (width < 30rem) {
.z-localnav__title { font-size: calc(17 * var(--u-chrome)); }
}
/* A 320 com texto normal (e com texto grande, barra abaixo de 20rem) o
botão S deixava o nome em "Toyota …": ali o rótulo vai a 12, como o botão
da barra local da apple.com, e os espaços a 2. Com texto a 200% a 320 o
rótulo a 13 ainda quebrava em duas linhas e dobrava a barra que gruda. */
@container localnav (width <= 20rem) {
.z-localnav__in { gap: var(--sys-space-2); }
/* O botão fica com tudo menos os 44 mínimos do nome, o chevron (44 com
8 de margem negativa) e os dois espaços. */
.z-localnav .z-localnav__cta {
font-size: calc(12 * var(--u-chrome));
max-inline-size: calc(100% - 2 * var(--sys-target) + var(--sys-space-8) - 2 * var(--sys-space-2));
}
}
@container localnav (width >= 45rem) {
@supports selector(::details-content) {
.z-localnav:not(.z-localnav--menu) .z-localnav__title { margin-inline-end: auto; }
.z-localnav:not(.z-localnav--menu) .z-localnav__more { margin-inline: 0; }
.z-localnav:not(.z-localnav--menu) .z-localnav__more > summary { display: none; }
.z-localnav:not(.z-localnav--menu) .z-localnav__more::details-content { content-visibility: visible; display: contents; }
.z-localnav:not(.z-localnav--menu) .z-localnav__links {
position: static;
display: flex;
gap: var(--sys-space-4);
padding: 0;
background: none;
border: 0;
}
.z-localnav:not(.z-localnav--menu) .z-localnav__links a {
padding-inline: var(--sys-space-8);
font: var(--sys-type-footnote);
letter-spacing: calc(var(--sys-track-footnote) * var(--sys-track-on));
}
}
}
/* --menu (guias, Termos, Privacidade): as âncoras são muitas para a linha
e ficam no menu do chevron em qualquer largura, com rolagem própria
quando passam da tela. A partir de 1024 o sumário ao lado do texto
(.z-toc) já mostra todas, e o chevron sai; abaixo, é o sumário que sai
(o chevron da barra faz o papel dele, e fica à mão durante a leitura). */
.z-localnav--menu .z-localnav__links {
max-block-size: calc(100dvh - var(--cmp-localnav-real, var(--cmp-localnav-h)));
overflow-y: auto;
overscroll-behavior: contain;
}
html:has(.z-localnav--menu) .z-toc { display: none; }
@media (min-width: 1024px) {
.z-localnav--menu .z-localnav__more { display: none; }
.z-localnav--menu .z-localnav__title { margin-inline-end: auto; }
html:has(.z-localnav--menu) .z-toc { display: block; }
}
@media (hover: hover) and (pointer: fine) {
.z-globalnav__links a:hover,
.z-localnav__links a:hover { color: var(--sys-tint-ink); }
}
:is(.z-globalnav__links, .z-localnav__links) a.is-hover { color: var(--sys-tint-ink); }
/* ---------------------------------------------------------------------------
* .z-showcase · o visual do herói: render do veículo atrás, iPhone na frente.
* Celular: render em cima, iPhone M subindo por cima dele, à direita.
* ≥ 600: render à esquerda pousado no chão, iPhone à direita (L, XL ≥ 1024).
* Entrada só vertical e só transform: o render e o iPhone passam da dobra
* (a 390 e a 1440 × 900), e nada começa invisível fora da primeira tela.
* O test-responsivo mede transbordo aos 60 ms: nada horizontal na carga.
* ------------------------------------------------------------------------- */
.z-showcase {
--cmp-showcase-w: var(--sys-measure-site);
--cmp-showcase-render-max: 640px; /* renders de 900 px: nunca maiores que 640 */
margin: 0;
}
.z-showcase__stage {
display: grid;
grid-template-areas: "palco";
inline-size: min(100%, var(--cmp-showcase-w));
margin-inline: auto;
}
.z-showcase__stage > * { grid-area: palco; }
.z-showcase__render {
inline-size: 100%;
block-size: auto;
align-self: start;
justify-self: start;
filter: var(--sys-shadow-contact);
animation: z-sobe-render var(--sys-dur-gentle) var(--sys-ease-gentle) backwards;
}
.z-showcase__device {
justify-self: end;
align-self: start;
/* o render tem 3:2: o iPhone começa a 58% da altura dele */
margin-block-start: 38%;
animation: z-sobe-device var(--sys-dur-gentle) var(--sys-ease-gentle) backwards;
animation-delay: var(--sys-delay-hero-device); /* 100 ms depois do render */
}
@media (min-width: 600px) {
.z-showcase__stage { align-items: end; }
.z-showcase__render {
/* 62% e não 66%: a traseira do carro terminava 40 px atrás do iPhone,
cortada pela moldura; assim o carro inteiro fica à esquerda dele. */
inline-size: min(62%, var(--cmp-showcase-render-max));
align-self: end;
margin-block-end: 9%;
}
.z-showcase__device { margin-block-start: 0; margin-inline-end: 4%; }
}
.z-caption {
margin: var(--sys-space-24) auto 0;
max-inline-size: var(--sys-measure-text);
font: var(--sys-type-footnote);
letter-spacing: calc(var(--sys-track-footnote) * var(--sys-track-on));
color: var(--sys-label-2);
text-align: center;
}
/* ---------------------------------------------------------------------------
* .z-device · iPhone 16 Pro desenhado em CSS (§10.8). A tela é o app real
* montado com os componentes do sistema a 402 px lógicos e reduzido por
* zoom. aria-hidden + inert, conteúdo em : a sonda de alvo pula.
* Tamanhos: .z-device (M) · --s · --l · --xl. --auto: desenha em XL e
* reduz por zoom no ponto de quebra (S < 360, M 360, L 600, XL 1024).
* TUDO o que está na tela é desenhado em pontos do iPhone (402 de largura)
* e reduzido pelo MESMO zoom: o app, a barra de estado, a ilha e o
* indicador de início. Assim o título grande começa abaixo da ilha em
* qualquer tamanho (a ilha sem zoom ficava grande demais e cobria o título).
* ------------------------------------------------------------------------- */
.z-device {
--cmp-device-border: 9px; --cmp-device-screen: 282px;
--cmp-device-zoom: 0.7015; --cmp-device-screen-h: 613px;
--cmp-device-screen-radius: 39px; --cmp-device-radius: 48px; --cmp-device-h: 631px;
--cmp-device-bezel: var(--sys-device-bezel);
--cmp-device-w: 402px; /* largura lógica do iPhone 16 Pro */
--cmp-device-hh: 874px; /* altura lógica */
--cmp-device-island-w: 126px; /* 31,3% da largura da tela */
--cmp-device-island-h: 37px; /* 9,2% da largura */
--cmp-device-island-top: 11px; /* 2,7% da largura */
--cmp-device-status-h: 59px; /* faixa da barra de estado */
--cmp-device-home-w: 139px;
--cmp-device-home-h: 5px;
--cmp-device-home-bottom: 8px;
box-sizing: content-box;
position: relative;
flex: none;
inline-size: var(--cmp-device-screen);
block-size: var(--cmp-device-screen-h);
padding: var(--cmp-device-border);
border-radius: var(--cmp-device-radius);
background: var(--cmp-device-bezel);
box-shadow: var(--sys-device-rim), var(--sys-shadow-device);
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
-webkit-user-select: none;
user-select: none;
pointer-events: none;
}
.z-device--s { --cmp-device-border: 8px; --cmp-device-screen: 232px;
--cmp-device-zoom: 0.5771; --cmp-device-screen-h: 504px; --cmp-device-screen-radius: 32px; --cmp-device-radius: 40px; --cmp-device-h: 520px; }
.z-device--l { --cmp-device-border: 10px; --cmp-device-screen: 320px;
--cmp-device-zoom: 0.7960; --cmp-device-screen-h: 696px; --cmp-device-screen-radius: 44px; --cmp-device-radius: 54px; --cmp-device-h: 716px; }
.z-device--xl { --cmp-device-border: 11px; --cmp-device-screen: 358px;
--cmp-device-zoom: 0.8905; --cmp-device-screen-h: 778px; --cmp-device-screen-radius: 49px; --cmp-device-radius: 60px; --cmp-device-h: 800px; }
.z-device__screen {
position: relative;
inline-size: 100%;
block-size: 100%;
overflow: clip;
border-radius: var(--cmp-device-screen-radius);
background: var(--sys-bg);
color: var(--sys-label);
isolation: isolate;
}
/* O app, em pontos do iPhone. contain faz do bloco o contêiner das peças
* fixas do app (a cápsula de abas fica dentro da tela, não na janela).
* display: block porque o markup é : em linha, a altura de 874 não
* valia e a caixa acabava onde acabava o conteúdo (717 px numa tela de 778),
* e a cápsula presa ao pé dela flutuava 90 px acima do pé da tela. */
.z-device__app {
position: relative;
display: block;
inline-size: var(--cmp-device-w);
block-size: var(--cmp-device-hh);
overflow: clip;
zoom: var(--cmp-device-zoom);
contain: layout paint;
background: var(--sys-bg);
color: var(--sys-label);
font: var(--sys-type-body);
letter-spacing: calc(var(--sys-track-body) * var(--sys-track-on));
}
.z-device__content {
display: block;
padding-block-start: var(--cmp-device-status-h);
padding-inline: var(--sys-space-16); /* a margem do app no iPhone */
}
/* O título grande funde ao rolar a TELA do app; aqui a rolagem é a da página
do site, e dentro do iPhone ele fica parado. */
.z-device .z-largetitle { animation: none; }
.z-device :is(.z-device__island, .z-device__status, .z-device__home) { zoom: var(--cmp-device-zoom); }
.z-device__island {
position: absolute;
z-index: var(--sys-z-raised);
inset-block-start: var(--cmp-device-island-top);
inset-inline-start: 50%;
inline-size: var(--cmp-device-island-w);
block-size: var(--cmp-device-island-h);
translate: -50% 0;
border-radius: var(--sys-radius-full);
background: var(--sys-island);
}
.z-device__status {
position: absolute;
z-index: var(--sys-z-raised);
inset: 0 0 auto;
display: grid;
grid-template-columns: 1fr var(--cmp-device-island-w) 1fr;
align-items: center;
block-size: calc(2 * var(--cmp-device-island-top) + var(--cmp-device-island-h));
color: var(--sys-label);
font: var(--sys-type-headline);
font-variant-numeric: tabular-nums;
}
.z-device__time { justify-self: center; padding-inline-start: var(--sys-space-8); }
.z-device__sys {
grid-column: 3;
justify-self: center;
display: inline-flex;
align-items: center;
gap: var(--sys-space-6);
padding-inline-end: var(--sys-space-8);
}
.z-device__sys svg { display: block; --cmp-ic-size: var(--sys-icon-13); fill: currentColor; }
.z-device__home {
position: absolute;
z-index: var(--sys-z-raised);
inset-block-end: var(--cmp-device-home-bottom);
inset-inline-start: 50%;
inline-size: var(--cmp-device-home-w);
block-size: var(--cmp-device-home-h);
translate: -50% 0;
border-radius: var(--sys-radius-full);
background: var(--sys-label);
}
/* Linhas do app dentro do iPhone: entrada de lista a partir de 400 ms, só
* transform (a captura de página inteira nunca pega linha transparente). */
.z-device__app :is(.z-item, .z-summary__tile) {
animation: z-site-enter var(--sys-dur-quick) var(--sys-ease-quick) backwards;
animation-delay: calc(var(--sys-delay-hero-rows) + min(var(--i, 0), var(--sys-stagger-max)) * var(--sys-stagger));
}
/* --auto: um só markup (XL) para todas as larguras. */
.z-device--auto { --cmp-device-scale: 0.7895; zoom: var(--cmp-device-scale); }
@media (max-width: 359.98px) { .z-device--auto { --cmp-device-scale: 0.6526; } }
@media (min-width: 600px) { .z-device--auto { --cmp-device-scale: 0.8947; } }
@media (min-width: 1024px) { .z-device--auto { --cmp-device-scale: 1; } }
/* ---------------------------------------------------------------------------
* .z-modelstage · palco do render na página do modelo. Fundo alt (ou branco numa
* seção alt), raio 28, até 640 CSS px (os renders têm 900 px).
* view-transition-name: veh- vem em linha, escrito pelo gerador.
* ------------------------------------------------------------------------- */
.z-modelstage {
--cmp-r: var(--sys-radius-sheet);
--cmp-modelstage-max: 640px;
--cmp-modelstage-bg: var(--sys-bg-alt);
display: grid;
place-items: center;
aspect-ratio: 3 / 2;
inline-size: min(100%, var(--cmp-modelstage-max));
margin-inline: auto;
padding: var(--sys-space-24);
border-radius: var(--cmp-r);
background: var(--cmp-modelstage-bg);
}
.z-section--alt .z-modelstage { --cmp-modelstage-bg: var(--sys-bg-plain); }
.z-modelstage img {
inline-size: 100%;
block-size: 100%;
object-fit: contain;
filter: var(--sys-shadow-contact);
}
/* ---------------------------------------------------------------------------
* .z-tile · ladrilho do bento. No máximo 4 por grade, todos do mesmo tamanho
* (2×2 a partir de 600). Título, texto curto e UM componente real do app
* como visual (nunca ícone solto). Sem borda e sem sombra; a sombra de
* levantar só no hover de ladrilho que é link, com ponteiro fino.
* ------------------------------------------------------------------------- */
.z-tiles {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--sys-space-20);
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 600px) { .z-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Três ladrilhos pequenos em fileira (guias): mesma regra, uma linha só. */
.z-tiles--3 { margin-block-start: var(--sys-site-block); }
@media (min-width: 600px) { .z-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.z-tile {
--cmp-r: var(--sys-radius-sheet);
container: ladrilho / inline-size;
display: flex;
flex-direction: column;
gap: var(--sys-space-8);
min-inline-size: 0;
padding: var(--sys-space-32);
overflow: clip;
border-radius: var(--cmp-r);
background: var(--sys-card);
color: var(--sys-label);
text-decoration: none;
}
@media (min-width: 1024px) { .z-tile { padding: var(--sys-space-40); } }
.z-tile__title {
margin: 0;
font: var(--sys-type-site-title-2);
letter-spacing: calc(var(--sys-track-site-title) * var(--sys-track-on));
color: var(--sys-label);
text-wrap: balance;
}
.z-tile__text {
margin: 0;
max-inline-size: 34em;
font: var(--sys-type-site-body);
letter-spacing: calc(var(--sys-track-site-body) * var(--sys-track-on));
color: var(--sys-label-2);
text-wrap: pretty;
}
.z-tile__visual { display: block; margin-block-start: auto; padding-block-start: var(--sys-space-24); }
/* Número de destaque (R$ 0,58): rounded, tabular, em preto. */
.z-tile__stat {
display: block;
font: var(--sys-type-stat);
letter-spacing: calc(var(--sys-track-display) * var(--sys-track-on));
font-variant-numeric: tabular-nums;
color: var(--sys-label);
}
.z-tile__stat small {
display: inline-block;
font-size: var(--sys-unit-scale); /* a regra da moeda e da unidade do sistema */
font-weight: 600;
letter-spacing: 0;
color: var(--sys-label-2);
}
/* Na grade 2×2 entre 600 e 1023 o ladrilho tem ~270 de miolo e o número de
* destaque (64 a 80 px) não cabe: lá ele usa o display L. */
@media (min-width: 600px) {
.z-tile__stat {
font: var(--sys-type-display-l);
letter-spacing: calc(var(--sys-track-display) * var(--sys-track-on));
font-family: var(--sys-font-rounded);
font-variant-numeric: tabular-nums;
}
}
@media (min-width: 1024px) {
.z-tile__stat {
font: var(--sys-type-stat);
letter-spacing: calc(var(--sys-track-display) * var(--sys-track-on));
font-variant-numeric: tabular-nums;
}
}
/* Renders sobrepostos (Garagem para a família). */
.z-tile__renders { display: flex; align-items: flex-end; justify-content: center; }
.z-tile__visual.z-tile__renders > img {
inline-size: 46%;
block-size: auto;
filter: var(--sys-shadow-contact);
}
.z-tile__visual.z-tile__renders > img + img { margin-inline-start: -14%; }
.z-tile__visual.z-tile__renders > img:nth-child(2) { inline-size: 40%; position: relative; z-index: var(--sys-z-raised); }
a.z-tile {
transition: transform var(--sys-dur-snappy) var(--sys-ease-snappy);
}
a.z-tile:is(:active, .is-pressed) {
transform: scale(var(--sys-press-scale-card));
transition-duration: var(--sys-dur-press);
transition-timing-function: var(--sys-ease-press);
}
a.z-tile:is(:focus-visible, .is-focused) { outline: var(--sys-focus-width) solid var(--sys-focus); outline-offset: var(--sys-focus-offset); }
@media (hover: hover) and (pointer: fine) {
a.z-tile { cursor: pointer; }
a.z-tile:hover { box-shadow: var(--sys-shadow-lift); }
}
a.z-tile.is-hover { box-shadow: var(--sys-shadow-lift); }
/* Número como título (R$ 0,58 por km): o ladrilho centra o conteúdo. */
.z-tile--stat { justify-content: center; }
.z-tile--stat .z-tile__title { margin-block-end: var(--sys-space-8); }
/* Visual em cima (cartão de veículo da galeria): render primeiro. */
.z-tile > .z-tile__visual:first-child { margin-block: 0 var(--sys-space-16); padding-block-start: 0; }
.z-tile__visual > img { inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; object-fit: contain; filter: var(--sys-shadow-contact); }
.z-tile__kind {
margin: 0;
font: var(--sys-type-footnote);
font-weight: 600;
letter-spacing: calc(var(--sys-track-footnote) * var(--sys-track-on));
color: var(--sys-label-2);
}
/* Três itens com intervalo (cartão de veículo). */
.z-tile__list {
display: grid;
margin: var(--sys-space-12) 0 0;
padding: 0;
list-style: none;
font: var(--sys-type-subheadline);
letter-spacing: calc(var(--sys-track-subheadline) * var(--sys-track-on));
color: var(--sys-label);
}
.z-tile__list li {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: var(--sys-space-12);
align-items: center;
padding-block: var(--sys-space-12);
border-block-start: 0.5px solid var(--sys-separator);
}
.z-tile__list .z-ic { grid-row: span 2; --cmp-ic-size: var(--sys-icon-20); color: var(--sys-label-2); }
.z-tile__list small {
font: var(--sys-type-footnote);
letter-spacing: calc(var(--sys-track-footnote) * var(--sys-track-on));
font-variant-numeric: tabular-nums;
color: var(--sys-label-2);
}
/* Último cartão da galeria ("Ver os 78 modelos"): um link, sem render. */
.z-tile--more { justify-content: center; align-items: flex-start; color: var(--sys-tint-ink); }
.z-tile--more .z-tile__title { color: var(--sys-tint-ink); }
.z-tile--more .z-ic { --cmp-ic-size: var(--sys-icon-34); color: var(--sys-tint); }
/* Ladrilho pequeno (guias, Veja um plano): padding 24, título 3. */
.z-tile--compact { padding: var(--sys-space-24); }
.z-tile--compact .z-tile__title {
font: var(--sys-type-site-title-3);
letter-spacing: calc(var(--sys-track-site-title) * var(--sys-track-on));
}
@media (min-width: 1024px) { .z-tile--compact { padding: var(--sys-space-32); } }
.z-tile--compact > .z-tile__visual:first-child { margin-block-end: var(--sys-space-8); }
.z-tile--compact .z-tile__visual > img { inline-size: 72%; margin-inline: auto; }
/* ---------------------------------------------------------------------------
* .z-facts-strip · faixa de fatos curtos: até 5 células de ícone 22 +
* frase Nota. Divisórias de 0,5 a partir de 600, grade de 2 abaixo.
* opcional vira o valor (página de modelo: "16 itens").
* ------------------------------------------------------------------------- */
.z-facts-strip {
--cmp-facts-value: clamp(1.5rem, 1.3239rem + 0.7512vw, 2rem); /* o tamanho do site-title-2 */
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sys-space-24) var(--sys-space-16);
max-inline-size: var(--sys-measure-wide);
margin: var(--sys-site-block) auto 0;
padding: 0;
list-style: none;
}
.z-facts-strip > li {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sys-space-8);
padding-inline: var(--sys-space-8);
font: var(--sys-type-site-small);
letter-spacing: calc(var(--sys-track-site-small) * var(--sys-track-on));
color: var(--sys-label);
text-align: center;
text-wrap: balance;
}
.z-facts-strip > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.z-facts-strip .z-ic { --cmp-ic-size: var(--sys-icon-22); color: var(--sys-label-2); }
/* Com texto grande (faixa abaixo de 20rem) o valor "10.000 km" não cabe em
meia largura e rolava a página de lado: uma célula por linha. */
@container secao (width < 20rem) {
.z-facts-strip { grid-template-columns: minmax(0, 1fr); }
}
/* O valor tem teto na largura da célula (cada célula é contêiner): a 320,
em meia largura, "2.4L 2AZ-FE" e "2006 a 2012" quebravam no meio. Com o
teto (16cqi, cerca de 11 caracteres por linha) eles cabem numa linha; se
ainda não couber, o valor quebra em vez de rolar a página. */
.z-facts-strip > li:has(> strong) { container-type: inline-size; }
.z-facts-strip strong {
display: block;
font: var(--sys-type-site-title-2);
font-size: min(var(--cmp-facts-value), 16cqi);
letter-spacing: calc(var(--sys-track-site-title) * var(--sys-track-on));
font-variant-numeric: tabular-nums;
color: var(--sys-label);
}
/* Variante lista (a faixa de recursos da landing, cinco frases sem valor):
no celular, em vez da grade de dois com o quinto sozinho, uma lista de
uma coluna, ícone 22 à esquerda, frase em Corpo e fio entre as linhas.
A partir de 600 é a faixa de sempre (o bloco de 600 abaixo desfaz). */
.z-facts-strip--list { grid-template-columns: minmax(0, 1fr); gap: 0; max-inline-size: var(--sys-measure-text); }
.z-facts-strip--list > li {
flex-direction: row;
gap: var(--sys-space-12);
min-block-size: var(--sys-target);
padding: var(--sys-space-12) 0;
font: var(--sys-type-site-body);
letter-spacing: calc(var(--sys-track-site-body) * var(--sys-track-on));
text-align: start;
text-wrap: pretty;
}
.z-facts-strip--list > li + li { border-block-start: 0.5px solid var(--sys-separator); }
.z-facts-strip--list .z-ic { flex: none; }
@media (min-width: 600px) {
.z-facts-strip {
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
gap: 0;
}
.z-facts-strip > li:last-child:nth-child(odd) { grid-column: auto; }
.z-facts-strip > li { padding-inline: var(--sys-space-16); }
.z-facts-strip > li + li { border-inline-start: 0.5px solid var(--sys-separator); }
.z-facts-strip--list { max-inline-size: var(--sys-measure-wide); }
.z-facts-strip--list > li {
flex-direction: column;
gap: var(--sys-space-8);
min-block-size: 0;
padding: 0 var(--sys-space-16);
font: var(--sys-type-site-small);
letter-spacing: calc(var(--sys-track-site-small) * var(--sys-track-on));
text-align: center;
text-wrap: balance;
}
.z-facts-strip--list > li + li { border-block-start: 0; }
}
/* ---------------------------------------------------------------------------
* .z-gallery · trilho que vaza para a direita. O primeiro cartão alinha com
* a coluna de 980 e o último também (padding e scroll-padding iguais).
* Cartão 84vw (< 600), 360 (≥ 600), 400 (≥ 1024), vão 20. Setas só com JS
* (o markup traz [hidden] e o script tira) e ponteiro fino.
* O trilho tem overflow-x: auto: é o que isenta os cartões da sonda.
* ------------------------------------------------------------------------- */
.z-gallery {
--cmp-gallery-card: 84vw;
--cmp-gallery-gap: var(--sys-space-20);
--cmp-gallery-inset: max(var(--cmp-site-gutter), (100% - var(--sys-measure-site)) / 2);
}
@media (min-width: 600px) { .z-gallery { --cmp-gallery-card: 360px; } }
/* No notebook o cartão cresce com a janela de forma que o último visível
fique cortado perto do meio (convite a rolar), nunca a 30 px da borda,
que parece erro. */
@media (min-width: 1024px) { .z-gallery { --cmp-gallery-card: clamp(360px, calc((100vw - 230px) / 2.5 - 20px), 480px); } }
.z-gallery__track {
display: flex;
gap: var(--cmp-gallery-gap);
margin: 0;
padding: var(--sys-space-4) var(--cmp-gallery-inset) var(--sys-space-24);
list-style: none;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--cmp-gallery-inset);
scrollbar-width: none;
}
.z-gallery__track::-webkit-scrollbar { display: none; }
.z-gallery__card {
display: flex;
flex: 0 0 var(--cmp-gallery-card);
min-inline-size: 0;
scroll-snap-align: start;
}
.z-gallery__card > * { flex: 1; min-inline-size: 0; }
.z-gallery__nav {
display: none;
justify-content: flex-end;
gap: var(--sys-space-12);
inline-size: min(100% - 2 * var(--cmp-site-gutter), var(--sys-measure-site));
margin-inline: auto;
}
@media (hover: hover) and (pointer: fine) {
.z-gallery__nav:not([hidden]) { display: flex; }
}
/* Cartão de conversa (seção da IA): assunto em Footnote e as bolhas. */
.z-gallery__subject {
margin: 0 0 var(--sys-space-16);
font: var(--sys-type-footnote);
font-weight: 600;
letter-spacing: calc(var(--sys-track-footnote) * var(--sys-track-on));
color: var(--sys-label-2);
}
/* ---------------------------------------------------------------------------
* .z-compare · tabela de 3 colunas (o que importa, Zelo, Drivvo). Fio de
* 0,5 px, sem zebra. Sim: status-em-dia fill 22 tint. Não: nao-se-aplica 20
* em label-3, com o texto em .z-sr. O nome do Zelo no cabeçalho em tinta 600
* (sem lavado: o lavado só no cabeçalho não pintava a coluna).
* Abaixo de 600 cada linha vira bloco: rótulo em cima, respostas lado a lado
* (o nome da coluna vem de data-lbl, com texto alternativo vazio para o
* leitor de tela não ler "Zelo" duas vezes). O markup traz os papéis da
* tabela (role=table, row, cell…): display: block não pode apagar a tabela
* para o VoiceOver.
* ------------------------------------------------------------------------- */
.z-compare {
inline-size: 100%;
max-inline-size: var(--sys-measure-site);
margin-inline: auto;
border-collapse: collapse;
font: var(--sys-type-site-body);
letter-spacing: calc(var(--sys-track-site-body) * var(--sys-track-on));
color: var(--sys-label);
}
/* O cabeçalho do celular gruda abaixo da barra local só onde ela existe. */
html:has(.z-localnav) .z-compare { --cmp-compare-top: var(--cmp-localnav-real, var(--sys-site-localnav-h)); }
.z-section--alt .z-compare { --cmp-compare-bg: var(--sys-bg-alt); }
.z-compare :is(thead, tbody, tr, th, td) { display: block; }
.z-compare thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* o mesmo .z-sr do sistema */
.z-compare tbody tr {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sys-space-12) var(--sys-space-16);
padding-block: var(--sys-space-16);
border-block-end: 0.5px solid var(--sys-separator);
}
.z-compare tbody tr:first-child { border-block-start: 0.5px solid var(--sys-separator); }
.z-compare tbody th {
grid-column: 1 / -1;
font: var(--sys-type-headline);
letter-spacing: calc(var(--sys-track-headline) * var(--sys-track-on));
text-align: start;
}
.z-compare tbody td {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--sys-space-4);
}
.z-compare tbody td::before {
content: attr(data-lbl);
content: attr(data-lbl) / "";
font: var(--sys-type-footnote);
font-weight: 600;
color: var(--sys-label-2);
}
.z-compare .z-compare__us::before { color: var(--sys-tint-ink); }
.z-compare__yes .z-ic { --cmp-ic-size: var(--sys-icon-22); color: var(--sys-tint); }
.z-compare__no .z-ic { --cmp-ic-size: var(--sys-icon-20); color: var(--sys-label-3); }
/* Sim com condição: o mesmo "feito" em cinza, com a condição embaixo. São
três estados com nome (sim, sim com condição, não), e nunca célula vazia. */
.z-compare__cond .z-ic { --cmp-ic-size: var(--sys-icon-22); color: var(--sys-label-2); }
.z-compare__txt {
font: var(--sys-type-subheadline);
letter-spacing: calc(var(--sys-track-subheadline) * var(--sys-track-on));
color: var(--sys-label-2);
}
/* Celular: em vez de cada linha repetir "Zelo ✓ / Drivvo ✓" (230 px por
* linha), a tabela fica em três colunas estreitas com o cabeçalho grudado
* logo abaixo da barra local. A frase de uma célula ("Com assinatura") desce
* para baixo da linha, inteira, com o nome da coluna antes dela. (Seção
* com menos de 30rem: a tabela de verdade só entra a partir de 600.) */
/* Abaixo de 20rem (só com texto grande) ficam os blocos de cima: em três
colunas de 64 o rótulo partia palavra ("Driv / vo", "Relatóri / o"). */
@container secao (width < 30rem) {
@container secao (width >= 20rem) {
.z-compare {
--cmp-compare-col: 64px;
}
.z-compare thead {
position: sticky;
top: var(--cmp-compare-top, 0px);
z-index: var(--sys-z-raised);
display: grid;
grid-template-columns: minmax(0, 1fr) repeat(2, var(--cmp-compare-col));
inline-size: auto;
block-size: auto;
overflow: visible;
clip-path: none;
white-space: normal;
/* Fundo da seção, do tamanho da tabela, com o fio de 0,5 px numa
sombra (que vai junto com o cabeçalho grudado): a linha que passa
por baixo some atrás de uma divisa. Sem faixa de borda a borda:
parada na página, ela riscava a seção inteira fora da tabela. */
background: var(--cmp-compare-bg, var(--sys-bg-plain));
--cmp-compare-line: inset 0 -0.5px 0 var(--sys-separator);
box-shadow: var(--cmp-compare-line);
}
.z-compare thead tr { display: contents; }
.z-compare thead th {
padding-block: var(--sys-space-8);
font: var(--sys-type-footnote);
font-weight: 600;
letter-spacing: calc(var(--sys-track-footnote) * var(--sys-track-on));
color: var(--sys-label-2);
text-align: center;
}
.z-compare thead th:first-child { text-align: start; }
.z-compare thead .z-compare__us { color: var(--sys-tint-ink); }
.z-compare tbody tr {
grid-template-columns: minmax(0, 1fr) repeat(2, var(--cmp-compare-col));
align-items: center;
gap: var(--sys-space-4) 0;
padding-block: var(--sys-space-12);
}
.z-compare tbody th {
grid-column: 1;
padding-inline-end: var(--sys-space-12);
font: var(--sys-type-site-body);
letter-spacing: calc(var(--sys-track-site-body) * var(--sys-track-on));
}
.z-compare tbody td { grid-row: 1; align-items: center; }
.z-compare tbody td.z-compare__us { grid-column: 2; }
.z-compare tbody td:last-child { grid-column: 3; }
.z-compare tbody td:not(:has(.z-compare__txt))::before { content: none; }
.z-compare tbody td:has(.z-compare__txt) {
grid-column: 1 / -1;
grid-row: 2;
flex-direction: row;
align-items: baseline;
gap: var(--sys-space-6);
}
/* A frase desce para a linha de baixo, mas o "feito" cinza fica na
coluna dele, na altura da primeira linha do rótulo. */
.z-compare tbody tr { position: relative; }
.z-compare tbody td.z-compare__cond > .z-ic {
position: absolute;
inset-block-start: calc(var(--sys-space-12) + (1lh - var(--sys-icon-22)) / 2);
inset-inline-start: calc(100% - var(--cmp-compare-col) / 2 - var(--sys-icon-22) / 2);
}
.z-compare tbody td.z-compare__cond.z-compare__us > .z-ic {
inset-inline-start: calc(100% - 3 * var(--cmp-compare-col) / 2 - var(--sys-icon-22) / 2);
}
}
}
.z-compare__note {
max-inline-size: var(--sys-measure-site);
margin: var(--sys-space-24) auto 0;
font: var(--sys-type-site-small);
color: var(--sys-label-2);
}
@media (min-width: 600px) {
.z-compare { display: table; table-layout: fixed; }
.z-compare thead {
position: static;
display: table-header-group;
inline-size: auto;
block-size: auto;
overflow: visible;
clip-path: none;
white-space: normal;
}
.z-compare tbody { display: table-row-group; }
.z-compare tr, .z-compare tbody tr { display: table-row; }
.z-compare :is(th, td), .z-compare tbody :is(th, td) {
display: table-cell;
padding: var(--sys-space-16) var(--sys-space-12);
border-block-end: 0.5px solid var(--sys-separator);
text-align: center;
vertical-align: middle;
}
.z-compare tbody tr:first-child { border-block-start: 0; }
.z-compare tbody th {
inline-size: 50%;
padding-inline-start: 0;
font: var(--sys-type-site-body);
letter-spacing: calc(var(--sys-track-site-body) * var(--sys-track-on));
text-align: start;
}
.z-compare tbody td::before { content: none; }
.z-compare thead th {
padding-block: var(--sys-space-12);
font: var(--sys-type-headline);
letter-spacing: calc(var(--sys-track-headline) * var(--sys-track-on));
color: var(--sys-label);
}
.z-compare thead th:first-child {
inline-size: 44%;
padding-inline-start: 0;
font: var(--sys-type-footnote);
font-weight: 600;
color: var(--sys-label-2);
text-align: start;
}
.z-compare thead .z-compare__us { color: var(--sys-tint-ink); }
.z-compare .z-ic { --cmp-ic-align: middle; }
.z-compare__cond > .z-ic { display: block; margin: 0 auto var(--sys-space-4); }
}
/* ---------------------------------------------------------------------------
* .z-price · preços. Mensal / Anual é o .z-seg do sistema com rádios de
* verdade por baixo (troca seca sem JS, por :has). Cartão: tipo em Título 2,
* preço rounded tabular, período em Corpo cinza, 3 ou 4 linhas com "feito"
* 16, ação no pé. A grade enche a largura com quantos cartões couberem (no
* mínimo 13,5rem cada, nunca uma coluna vazia ao lado dos planos: 3 planos,
* no máximo 3 colunas). O preço é contêiner de si mesmo: os valores
* encolhem com a largura dele (cqi) antes de cortar, em qualquer número de
* colunas e com texto grande. O CARTÃO não pode ser contêiner: a contenção
* de layout que vem com o container-type desliga o subgrid, e cada cartão
* fazia a própria grade (o Grátis com preço e divisória mais altos).
* ------------------------------------------------------------------------- */
.z-price { --cmp-price-col: 13.5rem; }
.z-price > .z-seg { inline-size: min(100%, 20rem); margin: 0 auto var(--sys-space-40); }
.z-price__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cmp-price-col)), 1fr));
gap: var(--sys-space-20);
max-inline-size: var(--sys-measure-wide);
margin: 0 auto;
padding: 0;
list-style: none;
}
/* As linhas dos cartões lado a lado se alinham (subgrid): nome, preço, lista
* e ação começam na mesma altura em todas as colunas. */
.z-price__card {
--cmp-r: var(--sys-radius-sheet);
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
row-gap: var(--sys-space-16);
min-inline-size: 0;
padding: var(--sys-space-24);
overflow: clip;
border-radius: var(--cmp-r);
background: var(--sys-card);
color: var(--sys-label);
}
.z-price__action { align-self: end; }
.z-price__name {
margin: 0;
font: var(--sys-type-site-title-2);
letter-spacing: calc(var(--sys-track-site-title) * var(--sys-track-on));
overflow-wrap: break-word;
}
.z-price__amount {
container-type: inline-size;
margin: 0;
font: var(--sys-type-price);
letter-spacing: calc(var(--sys-track-display) * var(--sys-track-on));
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.z-price__amount > :is(.z-price__m, .z-price__y) { font-size: min(var(--sys-price-size), 22cqi); }
.z-price__per {
display: block;
margin-block-start: var(--sys-space-8);
font: var(--sys-type-site-body);
letter-spacing: calc(var(--sys-track-site-body) * var(--sys-track-on));
color: var(--sys-label-2);
white-space: normal;
}
.z-price__list {
display: grid;
align-content: start;
gap: var(--sys-space-12);
margin: var(--sys-space-8) 0 0;
padding: var(--sys-space-16) 0 0;
list-style: none;
border-block-start: 0.5px solid var(--sys-separator);
font: var(--sys-type-site-small);
letter-spacing: calc(var(--sys-track-site-small) * var(--sys-track-on));
color: var(--sys-label);
}
.z-price__list li { display: flex; align-items: flex-start; gap: var(--sys-space-8); }
.z-price__list .z-ic {
flex: none;
--cmp-ic-size: var(--sys-icon-16);
margin-block-start: 0.2em;
color: var(--sys-tint);
}
.z-price__action { padding-block-start: var(--sys-space-8); }
.z-price__note {
max-inline-size: var(--sys-measure-text);
margin: var(--sys-space-32) auto 0;
font: var(--sys-type-site-small);
letter-spacing: calc(var(--sys-track-site-small) * var(--sys-track-on));
color: var(--sys-label-2);
text-align: center;
}
/* Mensal por padrão; Anual troca seco (sem JS). */
.z-price__m { display: contents; }
.z-price__y { display: none; }
.z-price:has(.z-price__opt--anual:checked) .z-price__m { display: none; }
.z-price:has(.z-price__opt--anual:checked) .z-price__y { display: contents; }
/* ---------------------------------------------------------------------------
* .z-faq · perguntas. O contêiner leva "faq z-faq" (gancho da sonda e do
* regex de paridade). e SEM atributo, resposta num
.
* O "+" é desenhado em CSS (dois traços de 2 px nos pseudos do summary):
* nada de