/* ───────────────────────────────────────────────────────────
   PETBOND Design System — multinational B2B
   ─────────────────────────────────────────────────────────── */

:root {
  /* Brand colors (preserved IP) */
  --brand-blue: #2D43E0;
  --brand-blue-deep: #1B2DAA;
  --brand-navy: #0E1438;
  --brand-orange: #F58A4A;
  --brand-cyan: #5BDFE0;

  /* Surfaces — warm paper feel */
  --bg: #F7F6F2;
  --bg-elevated: #FFFFFF;
  --bg-quiet: #EFECE3;
  --bg-deep: #0E1438;
  --bg-deep-elevated: #161E4A;

  /* Text */
  --ink: #0E1438;
  --ink-soft: #3B4163;
  --ink-mute: #5C6178;
  --ink-faint: #9CA0B5;
  --ink-on-deep: #F7F6F2;
  --ink-on-deep-mute: #9DA4C8;

  /* Lines */
  --line: #E0DBCE;
  --line-strong: #C7C0AC;
  --line-deep: #2B3267;

  /* Status */
  --positive: #1C7A4E;
  --warn: #B85A1A;

  /* Type */
  --font-display: 'Newsreader', 'Times New Roman', serif;
  --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Density */
  --section-py-1: clamp(64px, 8vw, 120px);
  --section-py-2: clamp(48px, 6vw, 88px);

  /* Radii */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;

  /* Shadows — soft & restrained */
  --sh-1: 0 1px 2px rgba(14,20,56,.04), 0 0 0 1px rgba(14,20,56,.05);
  --sh-2: 0 4px 12px rgba(14,20,56,.06), 0 0 0 1px rgba(14,20,56,.05);
  --sh-3: 0 24px 48px -16px rgba(14,20,56,.18), 0 0 0 1px rgba(14,20,56,.06);
}

/* dark variants applied via [data-theme="dark"] */
[data-theme="dark"] {
  --bg: #0A0E29;
  --bg-elevated: #131838;
  --bg-quiet: #161E4A;
  --bg-deep: #050818;
  --bg-deep-elevated: #0A0E29;
  --ink: #F2EFE6;
  --ink-soft: #C3C8DC;
  --ink-mute: #8E94B0;
  --ink-faint: #5E6483;
  --line: #232A55;
  --line-strong: #364081;
  --line-deep: #1A2050;
}

/* ───── Base ───── */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-feature-settings: 'cv02','cv03','cv04','cv11','ss01';
  font-size: 16px;
}
html { scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: clip; }
img { user-select: none; -webkit-user-drag: none; }

::selection { background: var(--brand-blue); color: white; }

/* ───── Type primitives ───── */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: .98;
  text-wrap: balance;
  /* Safety: break long words instead of overflowing the container on narrow viewports */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.display em, .display i { font-style: italic; font-weight: 500; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.eyebrow-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--ink-faint);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-size: clamp(36px, 5vw, 64px);
}
.section-title em, .section-title i { font-style: italic; }

.lead {
  font-family: var(--font-sans);
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.55;
  color: var(--ink-soft);
  font-weight: 400;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

.body { color: var(--ink-soft); line-height: 1.6; }
.small { font-size: 13px; color: var(--ink-mute); line-height: 1.55; }
.mono { font-family: var(--font-mono); letter-spacing: -.01em; }

/* ───── Layout ───── */
.container-x {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding-left: clamp(20px, 4vw, 56px);
  padding-right: clamp(20px, 4vw, 56px);
}
.section { padding-top: var(--section-py-1); padding-bottom: var(--section-py-1); position: relative; }
.section--tight { padding-top: var(--section-py-2); padding-bottom: var(--section-py-2); }

[data-density="compact"] {
  --section-py-1: clamp(48px, 5vw, 80px);
  --section-py-2: clamp(32px, 4vw, 60px);
}
[data-density="airy"] {
  --section-py-1: clamp(96px, 10vw, 180px);
  --section-py-2: clamp(64px, 7vw, 120px);
}

/* ───── Buttons ───── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .02em;
  border-radius: 999px;
  transition: all .25s cubic-bezier(.2,.7,.2,1);
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  text-decoration: none;
  position: relative;
}
.btn--sm { padding: 10px 18px; font-size: 13px; }
.btn--lg { padding: 16px 28px; font-size: 15px; }

.btn--primary {
  background: var(--brand-navy);
  color: var(--ink-on-deep);
  border-color: var(--brand-navy);
}
.btn--primary:hover { background: var(--brand-blue); border-color: var(--brand-blue); transform: translateY(-1px); }

.btn--accent {
  background: var(--brand-orange);
  color: var(--ink); /* navy: contraste 6.7:1 no laranja (era white=2.43, falha grave). Mantém a marca laranja. */
  border-color: var(--brand-orange);
}
.btn--accent:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 8px 24px -8px rgba(245,138,74,.6); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.btn--ghost-light {
  background: transparent;
  color: var(--ink-on-deep);
  border-color: rgba(255,255,255,.25);
}
.btn--ghost-light:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); }

.btn .arrow { transition: transform .25s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ───── Surface cards ───── */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: all .3s ease;
}
.card:hover { border-color: var(--line-strong); }
.card-quiet {
  background: var(--bg-quiet);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

/* ───── Underline link ───── */
.uline {
  position: relative;
  display: inline-block;
  padding-bottom: 1px;
}
.uline::after {
  content: ''; position: absolute; left: 0; bottom: 0; right: 0; height: 1px;
  background: currentColor; transform-origin: right; transform: scaleX(1);
  transition: transform .35s cubic-bezier(.65,.05,.3,1);
}
.uline:hover::after { transform-origin: left; transform: scaleX(0); animation: ulineRe .35s .35s forwards cubic-bezier(.65,.05,.3,1); }
@keyframes ulineRe { to { transform: scaleX(1); } }

/* ───── Reveal animation ───── */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal-stagger.in > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 60ms; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 120ms; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 180ms; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 240ms; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 300ms; }

/* ───── Marquee ───── */
@keyframes marqL { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee { display: flex; gap: 64px; animation: marqL 40s linear infinite; will-change: transform; }
.marquee--slow { animation-duration: 70s; }

/* ───── Header ───── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding-top: 14px; padding-bottom: 14px; }
.nav-link {
  font-size: 14px; color: var(--ink-soft); padding: 8px 4px; position: relative;
  font-weight: 500; letter-spacing: -.005em; cursor: pointer; transition: color .2s;
}
.nav-link:hover { color: var(--ink); }
.nav-link[data-active] { color: var(--ink); }
.nav-link[data-active]::after { content: ''; position: absolute; left: 4px; right: 4px; bottom: -4px; height: 1px; background: var(--brand-orange); }

.lang-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft);
  background: transparent; border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 6px 12px; cursor: pointer;
  transition: all .2s;
}
.lang-pill:hover { color: var(--ink); border-color: var(--ink); }

/* ───── Hero rule ───── */
.hr-line {
  height: 1px; background: var(--line);
  position: relative; overflow: hidden;
}
.hr-line::after {
  content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 30%;
  background: linear-gradient(90deg, transparent, var(--brand-orange), transparent);
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } }

/* ───── Product card chip ───── */
.chip-multi {
  display: inline-flex; align-items: center; gap: 0;
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: 14px; letter-spacing: -.01em;
}
.chip-multi__pet { color: var(--brand-blue); background: transparent; padding: 4px 0 4px 10px; }
.chip-multi__std { color: white; background: var(--brand-blue); padding: 4px 10px; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.chip-multi__multi { color: var(--brand-navy); background: var(--brand-cyan); padding: 4px 10px; }
.chip-multi__gransorb { color: var(--brand-orange); background: var(--brand-navy); padding: 4px 10px; }

/* ───── Tables ───── */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl thead th {
  text-align: left; font-weight: 500; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-mute); padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
}
.tbl tbody td { padding: 18px 20px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--ink-soft); }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr.highlight { background: color-mix(in srgb, var(--brand-blue) 5%, transparent); }
.tbl tbody tr.highlight td { color: var(--ink); }
.tbl tbody tr.highlight td:first-child { position: relative; }
.tbl tbody tr.highlight td:first-child::before {
  content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px;
  background: var(--brand-orange);
}

/* ───── Bar chart ───── */
.bar-row { display: grid; grid-template-columns: 110px 1fr 90px; align-items: center; gap: 14px; padding: 10px 0; }
.bar-track { height: 28px; background: var(--bg-quiet); border-radius: var(--r-sm); overflow: hidden; position: relative; }
.bar-fill {
  height: 100%; background: var(--ink-faint); border-radius: var(--r-sm);
  transform-origin: left; transform: scaleX(0); transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
  position: relative;
  z-index: 1;
}
/* Ghost bar — full-width baseline marker on each row, scaled to the CONTROL's
   value so every row shows where the comparison started. The gap between the
   bar fill and the ghost extent reads as the deviation from baseline. */
.bar-ghost {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  background: var(--line-strong); opacity: .25;
  border-radius: var(--r-sm);
  transform-origin: left; transform: scaleX(0);
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.in .bar-ghost { transform: scaleX(var(--ghost-w, 0)); }
/* Hide ghost on the control row itself — ghost == fill there, redundant */
.bar-row.is-control .bar-ghost { display: none; }
.surface-deep .bar-ghost { background: rgba(255,255,255,.14); opacity: 1; }
.bar-row.is-control .bar-fill { background: var(--line-strong); }
.bar-row.is-yucca .bar-fill { background: var(--ink-soft); }
.bar-row.is-petbond .bar-fill { background: var(--brand-blue); }
.bar-row.is-petbond .bar-fill::after {
  content: ''; position: absolute; right: -1px; top: 0; bottom: 0; width: 2px; background: var(--brand-orange);
}
.in .bar-fill { transform: scaleX(var(--w, 1)); }

/* ───── Accordion ───── */
.accordion-item {
  border-bottom: 1px solid var(--line);
}
.accordion-trigger {
  width: 100%; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 0;
  font-size: 17px; font-weight: 500; color: var(--ink);
  cursor: pointer; background: none; border: none;
  font-family: var(--font-sans); letter-spacing: -.01em;
}
.accordion-trigger:hover { color: var(--brand-blue); }
.accordion-icon { width: 24px; height: 24px; flex-shrink: 0; position: relative; }
.accordion-icon::before, .accordion-icon::after {
  content: ''; position: absolute; left: 4px; right: 4px; top: 50%; height: 1px;
  background: currentColor; transition: transform .3s ease;
}
.accordion-icon::after { transform: rotate(90deg); }
.accordion-item[data-open="true"] .accordion-icon::after { transform: rotate(0); }
.accordion-content {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .4s cubic-bezier(.2,.7,.2,1);
}
.accordion-item[data-open="true"] .accordion-content { grid-template-rows: 1fr; }
.accordion-content > div { overflow: hidden; min-height: 0; padding: 0 0 24px 0; color: var(--ink-soft); line-height: 1.65; max-width: 70ch; }

/* ───── Form ───── */
.form-field {
  position: relative;
}
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 14px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
  transition: all .2s;
  outline: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue) 15%, transparent);
}
/* Foco de teclado visível em elementos interativos (antes só inputs tinham anel). */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
  border-radius: 3px;
}
.form-label {
  display: block; font-size: 12px; font-weight: 500; color: var(--ink-mute);
  margin-bottom: 6px; letter-spacing: .04em;
  font-family: var(--font-mono); text-transform: uppercase;
}
.form-textarea { min-height: 120px; resize: vertical; font-family: var(--font-sans); }

/* ───── Hero specifics ───── */
.hero-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence baseFrequency='0.9' /></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.4'/></svg>");
  opacity: .035;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* Subtle pulsing glow behind the hero PETBOND logo */
.hero-logo-glow::before {
  content: '';
  position: absolute;
  inset: -18% -8%;
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--brand-orange) 55%, transparent) 0%,
    color-mix(in srgb, var(--brand-orange) 18%, transparent) 35%,
    transparent 70%);
  filter: blur(28px);
  opacity: .55;
  z-index: 0;
  pointer-events: none;
  animation: hero-logo-pulse 4.2s ease-in-out infinite;
}
@keyframes hero-logo-pulse {
  0%, 100% { opacity: .35; transform: scale(.96); }
  50%      { opacity: .7;  transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-logo-glow::before { animation: none; opacity: .5; }
  .accordion-content { transition: none; }
  .accordion-icon::before, .accordion-icon::after { transition: none; }
}

.divider-label {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-mute);
}
.divider-label::before, .divider-label::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ───── Dark surface util ───── */
.surface-deep {
  background: var(--brand-navy);
  color: var(--ink-on-deep);
}
.surface-deep .small { color: var(--ink-on-deep-mute); }
.surface-deep .body { color: var(--ink-on-deep-mute); }
.surface-deep .lead { color: var(--ink-on-deep-mute); }
.surface-deep .eyebrow { color: var(--brand-orange); }
.surface-deep .section-title { color: var(--ink-on-deep); }
.surface-deep .tbl thead th { color: var(--ink-on-deep-mute); border-color: var(--line-deep); }
.surface-deep .tbl tbody td { color: var(--ink-on-deep-mute); border-color: var(--line-deep); }
.surface-deep .tbl tbody tr.highlight td { color: var(--ink-on-deep); }
.surface-deep .tbl tbody tr.highlight { background: rgba(91,223,224,.06); }
.surface-deep .card { background: var(--bg-deep-elevated); border-color: var(--line-deep); color: var(--ink-on-deep); }
.surface-deep .accordion-trigger { color: var(--ink-on-deep); }
.surface-deep .accordion-item { border-color: var(--line-deep); }
.surface-deep .bar-track { background: var(--bg-deep-elevated); }
.surface-deep .bar-row.is-control .bar-fill { background: var(--line-deep); }
.surface-deep .bar-row.is-yucca .bar-fill { background: var(--ink-on-deep-mute); }
.surface-deep .bar-row.is-petbond .bar-fill { background: var(--brand-cyan); }

/* ───── Util ───── */
.diag-bg {
  background-image: repeating-linear-gradient(135deg, transparent, transparent 6px, color-mix(in srgb, var(--ink) 4%, transparent) 6px, color-mix(in srgb, var(--ink) 4%, transparent) 7px);
}

.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-orange); }

.kbd {
  font-family: var(--font-mono); font-size: 11px; padding: 2px 6px;
  background: var(--bg-quiet); border: 1px solid var(--line);
  border-radius: var(--r-xs); color: var(--ink-soft);
}

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r-xs);
  background: var(--bg-quiet); color: var(--ink-soft);
  border: 1px solid var(--line);
}
.tag--brand { background: color-mix(in srgb, var(--brand-blue) 8%, transparent); color: var(--brand-blue); border-color: color-mix(in srgb, var(--brand-blue) 20%, transparent); }
.tag--accent { background: color-mix(in srgb, var(--brand-orange) 12%, transparent); color: var(--brand-orange); border-color: color-mix(in srgb, var(--brand-orange) 30%, transparent); }
.tag--positive { background: color-mix(in srgb, var(--positive) 10%, transparent); color: var(--positive); border-color: color-mix(in srgb, var(--positive) 25%, transparent); }

/* Hero photo focal point — desktop mostra a cena larga; mobile reenquadra no sujeito (equipe+pets). */
.hero-photo { object-position: 50% 50%; }

/* responsive util */
.show-mobile { display: none; }
@media (max-width: 768px) {
  /* Ritmo vertical comprimido no mobile (~30% menos espaço entre seções)
     sem esconder conteúdo — ataca a sensação de "página comprida" na raiz. */
  :root {
    --section-py-1: clamp(40px, 11vw, 72px);
    --section-py-2: clamp(28px, 8vw, 52px);
  }
  .site-header__bar { grid-template-columns: 1fr auto; }
  .hide-mobile { display: none !important; }
  .show-mobile { display: inline-flex !important; }
  /* hero reenquadrado na equipe+gato — a janela alta do mobile mostra só ~20% da largura. */
  .hero-photo { object-position: 77% 50%; }
  /* footer de estratégia: empilhar título e botão (senão o título quebra 1 palavra/linha) */
  .strategy-footer { grid-template-columns: 1fr !important; gap: 20px !important; }
}

/* tweaks panel — make sure it stacks above everything */
[data-tweaks-panel] { z-index: 100; }