/* Foco Vet — design system (base carregada por todas as páginas).
   Engenharia reversa de apple.com/br (21/09/2026), adaptada à identidade da Foco: cores, fontes, textos e
   vídeos são os oficiais da marca e não mudam aqui; o que este arquivo define é o sistema — nav de 48px
   translúcida, escala tipográfica, "tiles" de largura total com 12px de vão, pílulas, sem borda e sem sombra.
   Site trava sempre no tema claro da marca (branco, azul e rosa), sem variante escura. */

@font-face { font-family: 'FV Poppins'; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/poppins-700.woff2) format('woff2'); }
@font-face { font-family: 'FV Poppins'; font-weight: 900; font-style: normal; font-display: swap; src: url(../fonts/poppins-900.woff2) format('woff2'); }
@font-face { font-family: 'FV Montserrat'; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/montserrat-400.woff2) format('woff2'); }
@font-face { font-family: 'FV Montserrat'; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/montserrat-500.woff2) format('woff2'); }
@font-face { font-family: 'FV Montserrat'; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/montserrat-600.woff2) format('woff2'); }
@font-face { font-family: 'FV Plex Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/plex-mono-400.woff2) format('woff2'); }
@font-face { font-family: 'FV Plex Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/plex-mono-500.woff2) format('woff2'); }

:root {
  /* cor (oficial, não mexer) */
  --paper: #FFFFFF; --paper-raised: #FFFFFF; --ink: #1B2150; --ink-muted: #565C82;
  --navy: #16216A; --pink: #CD163F; --pink-deep: #8C0F2B; --gradient-end: #B61437;
  --heading: var(--navy); --band-bg: #16216A;
  --line: rgba(22,33,106,0.14); --line-strong: rgba(22,33,106,0.30);
  --band-text: #F3F4FC; --band-text-muted: #C7CCF2;
  --tint: #F5F5F7;                      /* tile claro neutro (o mesmo da Apple) — a versão azulada #F3F4FC dava cast azul no fundo e barateava o visual */
  --font-display: 'FV Poppins', Arial, sans-serif;
  --font-body: 'FV Montserrat', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'FV Plex Mono', ui-monospace, 'Consolas', monospace;

  /* escala tipográfica (Apple: 56/28 no tile cheio, 40/21 no tile duplo, 19 callout, 17/25 corpo) */
  --fs-display: clamp(32px, 4vw, 56px);
  --fs-h1: clamp(32px, 3.6vw, 48px);
  --fs-h2: clamp(28px, 2.8vw, 40px);
  --fs-h3: clamp(21px, 1.8vw, 24px);
  --fs-sub: clamp(19px, 2vw, 28px);
  --fs-sub-sm: clamp(17px, 1.5vw, 21px);
  --fs-callout: clamp(14px, 1.3vw, 19px);
  --fs-body: 17px; --fs-body-sm: 15px; --fs-small: 12px;
  --lh-display: 1.07; --lh-heading: 1.1; --lh-body: 1.47;
  --track-display: -0.015em; --track-heading: -0.01em; --track-small: 0.01em;
  --measure: 62ch;

  /* ritmo: o espaço vem do vão entre tiles e do respiro interno, não de padding de seção */
  --gap: 12px;
  --tile-top: 56px; --tile-h: clamp(500px, 48vw, 692px); --tile-h-2: clamp(440px, 40vw, 580px);
  --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 48px; --space-6: 64px;
  --section: clamp(64px, 7vw, 104px);

  /* forma: sem borda, sem sombra; raio só na pílula e em mídia solta */
  --r-sm: 12px; --r-md: 16px; --r-lg: 28px; --r-pill: 980px;
  --shadow-rest: none; --shadow-hover: none; --shadow-float: 0 30px 70px rgba(22,33,106,0.16);
  --shadow-card: none;
  --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1);
  --nav-h: 48px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* clip (não hidden): mata o scroll lateral que os reveals transladados criam, sem virar scroll container (preserva o sticky do header) */
html, body { overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; display: block; }
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }

/* tipografia: peso 700 e caixa normal; tracking negativo no grande, positivo no pequeno */
h1, h2, h3 { font-family: var(--font-display); color: var(--heading); font-weight: 700; text-wrap: balance; margin: 0; letter-spacing: var(--track-heading); line-height: var(--lh-heading); overflow-wrap: break-word; }
h1 { font-size: var(--fs-h1); letter-spacing: var(--track-display); line-height: var(--lh-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
.eyebrow { font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pink); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

/* pílulas (Apple: 17px, 11×21, raio 980; 14px, 8×15 no celular) — primária cheia, secundária contorno da mesma cor */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-body); font-weight: 500; font-size: 17px; line-height: 1.2; letter-spacing: -0.01em; padding: 11px 21px; border-radius: var(--r-pill); text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap; transition: background 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease); }
.btn:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
.btn-primary { background: var(--pink); color: #fff; border-color: var(--pink); }
.btn-primary:hover { background: var(--pink-deep); border-color: var(--pink-deep); }
.btn-ghost { border-color: var(--pink); color: var(--pink); background: transparent; }
.btn-ghost:hover { background: var(--pink); color: #fff; }
.btn-sm { font-size: 14px; padding: 8px 15px; }
@media (max-width: 734px) { .btn { font-size: 14px; padding: 8px 15px; } }

/* nav: barra fixa de 48px, branca translúcida com blur, links pequenos peso 400 */
header.site { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.8); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px); border-bottom: 1px solid rgba(22,33,106,.08); }
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--nav-h); padding-top: 0; padding-bottom: 0; }
.logo { display: flex; align-items: center; text-decoration: none; }
.logo-real { display: block; width: 84px; height: 30px; background-image: url('../images/logo-foco.png'); background-size: 94px 94px; background-position: -6px -31px; background-repeat: no-repeat; }
nav.primary { display: flex; align-items: center; gap: 4px; }
nav.primary a { font-size: 13px; font-weight: 400; letter-spacing: var(--track-small); text-decoration: none; color: rgba(27,33,80,.82); padding: 6px 12px; border-radius: var(--r-pill); transition: color 160ms var(--ease), background 160ms var(--ease); }
nav.primary a:hover { color: var(--navy); background: rgba(22,33,106,.06); }
.nav-cta { display: flex; align-items: center; }
.nav-cta .btn { font-size: 12px; padding: 6px 13px; }

/* tiles: a unidade de layout (Apple: 692px de altura, 12px de vão, texto centralizado no topo) */
.tiles { display: grid; gap: var(--gap); }
.tiles-2 { grid-template-columns: 1fr 1fr; padding: 0 var(--gap); }
.tiles-3 { grid-template-columns: repeat(3, 1fr); padding: 0 var(--gap); }
.tile { position: relative; overflow: hidden; background: var(--paper); color: var(--ink); min-height: var(--tile-h); display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--tile-top) 24px 0; }
.tiles-2 .tile, .tiles-3 .tile { min-height: var(--tile-h-2); }
.tile.tint { background: var(--tint); }
.tile.dark { background: var(--navy); color: var(--band-text); }
.tile.dark h1, .tile.dark h2, .tile.dark h3 { color: #fff; }
.tile.dark .btn-ghost { border-color: rgba(255,255,255,.85); color: #fff; }
.tile.dark .btn-ghost:hover { background: #fff; color: var(--navy); border-color: #fff; }
.tile.auto { min-height: 0; padding-bottom: var(--tile-top); }
.tile-copy { position: relative; z-index: 2; max-width: 880px; }
.tile-label { display: block; font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pink); margin-bottom: 10px; }
.tile-head { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--track-display); }
.tiles-2 .tile-head, .tiles-3 .tile-head { font-size: var(--fs-h2); }
.tile-head em { font-style: normal; color: var(--pink); }
.tile-sub { font-size: var(--fs-sub); line-height: 1.14; font-weight: 400; margin-top: 6px; }
.tiles-2 .tile-sub, .tiles-3 .tile-sub { font-size: var(--fs-sub-sm); }
.tile-callout { font-size: var(--fs-callout); line-height: 1.3; color: var(--ink-muted); margin: 8px auto 0; max-width: 56ch; }
.tile.dark .tile-callout { color: var(--band-text-muted); }
.tile-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 17px; margin-top: 23px; }
.tile-media { position: relative; z-index: 1; width: 100%; margin-top: 32px; display: flex; justify-content: center; align-items: flex-end; flex: 1; }
.tile-media img, .tile-media video { max-width: 100%; height: auto; display: block; }
.tile-media.bg { position: absolute; inset: 0; z-index: 0; margin: 0; }
.tile-media.bg img, .tile-media.bg video { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1068px) { .tiles-3 { grid-template-columns: 1fr; } }
@media (max-width: 734px) {
  :root { --tile-top: 39px; --tile-h: 500px; --tile-h-2: 420px; --gap: 12px; }
  .tiles-2, .tiles-3 { grid-template-columns: 1fr; padding: 0; }
  .tile { padding-left: 20px; padding-right: 20px; }
  .tile-sub { margin-top: 4px; }
  .tile-ctas { gap: 14px; margin-top: 18px; }
  .tile-media { margin-top: 24px; }
}

/* ---------- páginas internas: hero de página + conteúdo em tiles alternados ---------- */
.tile-page-hero { min-height: 0; padding-bottom: 48px; }
.tile-page-hero .breadcrumb { justify-content: center; padding: 0 0 18px; }
.tile-page-hero .eyebrow { display: block; margin-bottom: 10px; }
.tile-page-hero h1 { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--track-display); max-width: 22ch; margin: 0 auto; }
.tile-page-hero p { font-size: var(--fs-sub-sm); line-height: 1.4; color: var(--ink-muted); max-width: 62ch; margin: 12px auto 0; }
.tile-page-hero .jump-nav, .tile-page-hero .blog-cats { justify-content: center; margin-top: 22px; }
.tile-page-hero .article-meta { justify-content: center; margin-top: 14px; }
.tile.tile-content { display: block; text-align: left; min-height: 0; padding: 48px 24px 56px; }
.tile.tile-content > .tile-inner { width: 100%; max-width: 1080px; margin: 0 auto; }
.tile.tile-content h2 { font-size: var(--fs-h2); }
.tile-cta { background: linear-gradient(135deg, var(--navy) 0%, var(--gradient-end) 100%); color: var(--band-text); min-height: 0; padding-bottom: var(--tile-top); justify-content: center; }
.tile-cta .eyebrow { display: block; color: #fff; opacity: .85; margin-bottom: 10px; }
.tile-cta h2 { color: #fff; font-size: var(--fs-h2); max-width: 24ch; margin: 0 auto; }
.tile-cta p { color: var(--band-text-muted); font-size: var(--fs-sub-sm); line-height: 1.4; max-width: 56ch; margin: 10px auto 0; }
.tile-cta .btn { margin-top: 22px; }
.tile-cta .btn-ghost { border-color: rgba(255,255,255,.85); color: #fff; }
.tile-cta .btn-ghost:hover { background: #fff; color: var(--navy); }
.cta-final .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cta-final p { margin-top: 8px; }
/* superfícies (cards, painéis) dentro de tile: sem borda; a cor vem do contraste com o tile */
.tile.tint :is(.mv-card, .diff-card, .rotor-card, .rotor-list-card, .blog-card, .prod-card, .mission-banner, .indic-panel, .side-panel, .test-area-card, .panel-group, .article-cta, .iu-section-card, .tech-card, .stat-highlight, .formula) { background: var(--paper); }
.tile:not(.tint):not(.dark) :is(.mv-card, .diff-card, .rotor-card, .rotor-list-card, .blog-card, .prod-card, .mission-banner, .indic-panel, .side-panel, .test-area-card, .panel-group, .article-cta, .tech-card, .stat-highlight, .formula) { background: var(--tint); }
.tile.dark :is(.cat-section-head h2, .prod-card .pname) { color: #fff; }
.tile.dark :is(.cat-section-sub, .prod-card .ptag) { color: var(--band-text-muted); }
.tile.tile-cat { min-height: 0; padding: 44px 28px 48px; justify-content: center; }
.tile-cat .cat-section-head { justify-content: center; margin: 0; }
.tile-cat .cat-section-head h2 { font-size: var(--fs-h2); }
.tile-cat .cat-section-sub { color: var(--ink-muted); font-size: var(--fs-sub-sm); line-height: 1.4; max-width: 44ch; margin: 8px auto 20px; }
@media (max-width: 734px) { .tile.tile-content { padding: 36px 20px 44px; } .tile-page-hero { padding-bottom: 36px; } }