@import url("./fundo-vivo.css");

/* =========================================================================
   Composição da página Empresa
   Só o que não existe como componente v3: chrome de cabeçalho e rodapé,
   hero, painel de números, régua da linha do tempo e lista de valores.
   Tudo em cima dos tokens, sem cor nem medida fora do contrato.
   ========================================================================= */

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 100;
  transform: translateY(-200%);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--shadow-2);
  font-size: var(--font-size-body-sm);
  font-weight: 600;
}
.skip-link:focus-visible { transform: translateY(0); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-control); }

/* O reset da branch zera margem e padding de ul, mas não de ol nem dl.
   Sem isso o navegador aplica padding-inline-start de 40px, o que desalinhava
   a trilha da linha do tempo e quebrava o cálculo de posição do scroll. */
ol, dl { margin: 0; padding: 0; list-style: none; }
dd { margin: 0; }

.eyebrow {
  margin: 0;
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  letter-spacing: var(--tracking-label);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.lead {
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
  max-width: 62ch;
}
.body-secondary { color: var(--color-text-secondary); }
.stack { display: grid; gap: var(--space-5); align-content: start; }
.stack--tight { gap: var(--space-4); }
.rail {
  width: min(100%, calc(var(--content-max) + (var(--content-gutter) * 2)));
  margin-inline: auto;
  padding-inline: var(--content-gutter);
}
.spot { display: block; flex: none; }

/* Override do Fold da branch.
   Fold.astro força min-height de 900px ou 100svh no shell e no grid. Com 10
   dobras isso abre vazios enormes entre o conteúdo e a borda da dobra.
   Aqui a altura volta a ser livre e o respiro fica no padding, como no v3:
   96px no desktop e 64px abaixo de 900px, que o próprio componente já define. */
.fold__shell,
.fold__grid,
.fold--dark-contained .fold__shell,
.fold--dark-contained .fold__grid { min-height: 0; }

/* Dobra em caixa. O shell vira painel, com o fundo abstrato da marca sob
   um véu branco em gradiente para o texto manter contraste. */
.fold--boxed { padding-block: var(--space-7); }
.fold--boxed .fold__shell {
  position: relative;
  padding: clamp(32px, 5vw, 64px);
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-panel);
  background-color: var(--color-surface);
}
.fold--boxed .fold__grid { position: relative; z-index: 1; }
/* Defasagem, para as duas caixas da página não pulsarem em sincronia. */
.fold--boxed .fundo-vivo__blob { animation-delay: -5s; }
@media (max-width: 420px) {
  .fold--boxed .fold__shell { border-radius: var(--radius-card-lg); padding: var(--space-5); }
}

/* Split com texto longo alinha pelo topo, não pelo centro. */
.fold--align-start .fold__grid { align-items: start; }

.accent { color: var(--color-primary); }

/* Título de dobra: uma escala só para as nove dobras, Título 1.
   Os dois tamanhos do EditorialStatement não servem aqui. O 'editorial'
   (51px/500) pressupõe uma afirmação única por tela e o 'heading' (18px)
   é pequeno demais para título de seção. Título 1 é token do contrato. */
.fold-title,
.statement--h1 .statement__line {
  font-size: var(--font-size-heading-1);
  line-height: var(--line-height-heading-1);
  letter-spacing: var(--tracking-heading-1);
  font-weight: 600;
}

/* Respiro do EditorialStatement de volta ao ritmo do v3.
   O componente da branch usa 16px do olho para o título e 8px do título para
   a explicação, o que cola os três blocos. O v3 usava 24px nos dois,
   que é o --space-5 do contrato. */
.statement__eyebrow { margin-bottom: var(--space-5); }
.statement__explanation { margin-top: var(--space-5); }
.fold__band { margin-top: var(--space-8); }
.prose { max-width: 68ch; }

.statement__line.statement__explanation--lead {
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body);
  letter-spacing: 0;
  font-weight: 400;
}

/* ---------- Cabeçalho ------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--color-border-subtle);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
}
.nav { display: flex; align-items: center; gap: var(--space-5); min-height: 72px; }
.nav__logo {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: var(--space-2); margin-left: calc(var(--space-2) * -1);
  border-radius: var(--radius-control);
}
.nav__logo img { width: 128px; height: auto; }

.nav__primary { display: none; align-items: center; gap: var(--space-1); margin-inline: auto; }
@media (min-width: 1080px) { .nav__primary { display: flex; } }

.nav__actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
@media (min-width: 1080px) { .nav__actions { margin-left: 0; } }

.nav__link,
.nav__trigger {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding-inline: var(--space-3);
  border: 0; background: transparent; border-radius: var(--radius-control);
  font-size: var(--font-size-body-sm); font-weight: 500;
  color: var(--color-text-secondary); cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard);
}
.nav__link:hover,
.nav__trigger:hover,
.nav__trigger[aria-expanded="true"] { color: var(--color-text-primary); background: var(--color-surface-subtle); }
.nav__chevron { color: var(--color-icon-secondary); transition: transform var(--duration-fast) var(--ease-standard); }
.nav__trigger[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

.nav__item { position: relative; }
.nav__menu {
  position: absolute; top: calc(100% + var(--space-2)); left: 0; z-index: 20;
  width: 360px; padding: var(--space-3); display: grid; gap: var(--space-1);
  border: 1px solid var(--color-border-subtle); border-radius: var(--radius-card-lg);
  background: var(--color-surface); box-shadow: var(--shadow-2);
}
.nav__menu[hidden] { display: none; }
.nav__menu--compact { width: 300px; left: auto; right: 0; }
.nav__menu-item { display: grid; gap: var(--space-1); padding: var(--space-3); border-radius: var(--radius-card); transition: background-color var(--duration-fast) var(--ease-standard); }
.nav__menu-item:hover { background: var(--color-surface-subtle); }
.nav__menu-title { font-size: var(--font-size-body-sm); font-weight: 600; color: var(--color-text-primary); }
.nav__menu-desc { font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--color-text-secondary); }

.lang { position: relative; }
.lang__menu { width: 200px; left: auto; right: 0; }
.lang__option {
  display: flex; align-items: center; gap: var(--space-3); min-height: 44px;
  padding-inline: var(--space-3); border-radius: var(--radius-control);
  font-size: var(--font-size-body-sm); color: var(--color-text-secondary);
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.lang__option:hover { background: var(--color-surface-subtle); color: var(--color-text-primary); }
.lang__option[aria-current="true"] { background: var(--color-primary-soft); color: var(--color-text-primary); font-weight: 600; }
.lang__code { min-width: 24px; font-size: var(--font-size-label); letter-spacing: var(--tracking-label); font-weight: 600; color: var(--color-text-muted); }

.nav__login, .nav__cta, .lang { display: none; }
@media (min-width: 640px) { .nav__cta { display: inline-flex; } .lang { display: block; } }
@media (min-width: 800px) { .nav__login { display: inline-flex; } }
.nav__toggle { display: inline-flex; }
@media (min-width: 1080px) { .nav__toggle { display: none; } }

.nav__drawer { display: grid; gap: var(--space-1); padding-block: var(--space-4) var(--space-6); border-top: 1px solid var(--color-border-subtle); }
.nav__drawer[hidden] { display: none; }
@media (min-width: 1080px) { .nav__drawer { display: none !important; } }
.nav__drawer a {
  display: flex; align-items: center; min-height: 48px; padding-inline: var(--space-3);
  border-radius: var(--radius-control); font-size: var(--font-size-body);
  font-weight: 500; color: var(--color-text-secondary);
}
.nav__drawer a:hover { background: var(--color-surface-subtle); color: var(--color-text-primary); }
.nav__drawer .button { margin-top: var(--space-3); justify-self: start; color: var(--color-on-primary); }
.nav__drawer-group { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--color-border-subtle); }
.nav__drawer .nav__drawer-group a {
  min-height: 44px; padding-inline: var(--space-4); border-radius: var(--radius-pill);
  border: 1px solid var(--color-border); font-size: var(--font-size-body-sm); font-weight: 600;
}
.nav__drawer .nav__drawer-group a[aria-current="true"] { background: var(--color-primary-soft); border-color: transparent; color: var(--color-text-primary); }

/* ---------- Hero ----------------------------------------------------- */

/* Fundo em movimento, usado no hero e na caixa de valores.
   A arte da branch fica estática, como base de textura. O movimento vem de
   manchas de cor desenhadas com o token da marca: um degradê borrado não tem
   borda para o olho rastrear, e por isso mover a arte não produzia movimento
   perceptível. O véu branco não se move, para o contraste do texto não oscilar
   junto com as manchas. */
.hero-fold {
  --company-header-height: 68px;
  --company-hero-padding: var(--space-9);
  position: relative;
  overflow: hidden;
}
.hero-fold .fold__shell {
  padding-top: calc(var(--company-hero-padding) + var(--company-header-height));
}
.hero-fold .fold__rail { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .hero-fold { --company-hero-padding: var(--space-8); }
}

.hero { display: grid; gap: var(--space-6); justify-items: center; text-align: center; }
.hero__title {
  max-width: 18ch;
  font-size: var(--font-size-display);
  line-height: var(--line-height-display);
  letter-spacing: var(--tracking-display);
  font-weight: 600;
}
.hero__title span { display: block; color: var(--color-primary); }
.hero__lead { max-width: 58ch; font-size: var(--font-size-body-lg); line-height: var(--line-height-body); color: var(--color-text-secondary); }
.hero__divider { width: min(100%, 900px); height: 1px; margin-block: var(--space-2); background: var(--color-border-subtle); }
.hero__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4) var(--space-6); }
.hero__badge { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--color-text-secondary); }

/* ---------- Painel de números ---------------------------------------- */

.figures {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}
@media (min-width: 640px) { .figures--4, .figures--6 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .figures--4 { grid-template-columns: repeat(4, 1fr); }
  .figures--6 { grid-template-columns: repeat(3, 1fr); }
}
.figure {
  display: grid; gap: var(--space-2); align-content: start;
  padding: var(--space-6) var(--space-5);
  box-shadow: inset 0 1px 0 var(--color-border-subtle), inset 1px 0 0 var(--color-border-subtle);
}
.figure__value {
  display: flex; align-items: baseline; gap: 2px;
  font-size: clamp(2.25rem, 4vw, 3rem); line-height: 1.05;
  letter-spacing: -0.035em; font-weight: 600; color: var(--color-text-primary);
}
.figure__unit { font-size: 0.45em; font-weight: 600; letter-spacing: -0.01em; color: var(--color-text-muted); }
.figure__unit--word { margin-left: 4px; }
.figure__label {
  font-size: var(--font-size-label); line-height: var(--line-height-label);
  letter-spacing: var(--tracking-label); font-weight: 600; text-transform: uppercase;
  color: var(--color-text-muted);
}
.figure__note { font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--color-text-secondary); }
.figure__icon { margin-bottom: var(--space-1); }

/* ---------- Linha do tempo ------------------------------------------- */

.tl__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.tl__nav { display: flex; gap: var(--space-2); flex: none; }
.tl__nav-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-border); background: transparent;
  color: var(--color-icon-primary); cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              opacity var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.tl__nav-btn:hover:not(:disabled) { background: var(--color-surface); border-color: var(--color-border-strong); }
.tl__nav-btn:active:not(:disabled) { transform: scale(0.98); }
.tl__nav-btn:disabled { opacity: 0.35; cursor: default; }

/* Régua: os anos são a navegação e um indicador curto marca onde você está.
   Sem faixa violeta longa e sem bolinhas: a linha é só a base dos rótulos. */
.tl__rail { margin-block: var(--space-7) var(--space-6); }

.tl__years { display: none; }
@media (min-width: 900px) {
  .tl__years { display: flex; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
  .tl__year {
    min-height: 44px;
    padding-inline: 0;
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    font-size: var(--font-size-body-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-standard);
  }
  .tl__year:hover { color: var(--color-text-secondary); }
  .tl__year.is-seen { color: var(--color-text-secondary); }
  .tl__year[aria-current="true"] { color: var(--color-text-primary); }
}

.tl__line { position: relative; height: 2px; border-radius: var(--radius-pill); background: var(--color-border); }
.tl__line-active {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  transition: left var(--duration-base) var(--ease-standard), width var(--duration-base) var(--ease-standard);
}

.tl__track {
  display: flex; gap: var(--space-4); overflow-x: auto;
  overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: var(--space-1);
}
.tl__track::-webkit-scrollbar { display: none; }
.tl__card { flex: 0 0 min(84%, 360px); scroll-snap-align: start; display: grid; gap: var(--space-3); align-content: start; }
.tl__card-year {
  font-size: var(--font-size-heading-3); line-height: var(--line-height-heading-3);
  letter-spacing: var(--tracking-heading-3); font-weight: 600;
  color: var(--color-text-muted); font-variant-numeric: tabular-nums;
}
.tl__card-title {
  font-size: var(--font-size-heading-3); line-height: var(--line-height-heading-3);
  letter-spacing: var(--tracking-heading-3); font-weight: 600; color: var(--color-text-primary);
}
.tl__card-desc { font-size: var(--font-size-body); line-height: var(--line-height-body); color: var(--color-text-secondary); }

/* ---------- Valores --------------------------------------------------- */

.values { overflow: hidden; }
.values__item {
  display: grid; grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--space-2) var(--space-4); align-items: start;
  padding: var(--space-5); border-top: 1px solid var(--color-border-subtle);
}
.values__item:first-child { border-top: 0; }
.values__mark { grid-row: span 2; display: inline-flex; width: 40px; height: 40px; }
.values__name {
  align-self: center;
  font-size: var(--font-size-heading-3); line-height: var(--line-height-heading-3);
  letter-spacing: var(--tracking-heading-3); font-weight: 600; color: var(--color-text-primary);
}
.values__desc { margin: 0; font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--color-text-secondary); }
@media (max-width: 599px) {
  .values__item { grid-template-columns: 34px minmax(0, 1fr); gap: var(--space-2) var(--space-3); padding: var(--space-4); }
  .values__mark { width: 34px; height: 34px; }
}

/* ---------- Confiança -------------------------------------------------- */

.trust { display: grid; gap: var(--space-8); }

/* Cabeçalho da dobra: afirmação à esquerda, selo SOC 2 à direita. */
.trust__head { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 900px) {
  .trust__head { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); }
  .trust__seal { justify-self: end; }
}
.trust__seal img { width: clamp(140px, 16vw, 190px); }

.trust__metrics { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 600px) { .trust__metrics { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .trust__metrics { grid-template-columns: repeat(4, 1fr); } }
.metric .surface__body { display: grid; gap: var(--space-2); align-content: start; }
.metric__value { font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.1; letter-spacing: -0.03em; font-weight: 600; color: var(--color-text-primary); }
.metric__label { font-size: var(--font-size-body-sm); font-weight: 600; color: var(--color-text-primary); }
.metric__desc { font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--color-text-secondary); }
.metric__icon { margin-bottom: var(--space-1); }

/* Duas famílias de selo, rotuladas. Uma é da empresa, a outra é dos prédios
   onde a empresa opera, e misturar as duas é factualmente errado. */
.certs { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .certs { grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr); gap: var(--space-8); } }

.certs__group { display: grid; gap: var(--space-4); align-content: start; }
.certs__label {
  font-size: var(--font-size-label); line-height: var(--line-height-label);
  letter-spacing: var(--tracking-label); font-weight: 600; text-transform: uppercase;
  color: var(--color-text-muted);
}
.certs__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--space-6); }
@media (min-width: 900px) {
  .certs__group + .certs__group { padding-left: var(--space-8); border-left: 1px solid var(--color-border); }
}
/* A arte oficial dos selos é preta com transparência. No painel escuro ela
   é invertida para tinta clara, que é o que o tema escuro pede. */
.cert-badge { height: 40px; width: auto; opacity: 0.92; filter: invert(1); }
/* ISO 27001: marca oficial nao pode aparecer; o nome escrito ocupa o mesmo
   eixo dos selos restantes. */
.cert-name {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: var(--font-size-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  white-space: nowrap;
}

/* ---------- Imprensa ---------------------------------------------------- */

.news-grid { display: grid; gap: var(--space-5); }
@media (min-width: 800px) { .news-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } }

.news { display: flex; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.news:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-1); }
.news .surface__body { display: flex; flex: 1; flex-direction: column; gap: var(--space-4); }
.news__capa {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-surface-subtle);
}
.news__capa img { width: 100%; height: 100%; object-fit: cover; }
/* Capa é opcional: matéria sem imagem publicada fica só com texto. */
.news__meta { display: flex; align-items: center; gap: var(--space-3); font-size: var(--font-size-label); line-height: var(--line-height-label); letter-spacing: var(--tracking-label); font-weight: 600; text-transform: uppercase; color: var(--color-text-muted); }
.news__title { font-size: var(--font-size-heading-2); line-height: var(--line-height-heading-2); letter-spacing: var(--tracking-heading-2); font-weight: 600; color: var(--color-text-primary); }
.news__desc { font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--color-text-secondary); }
.news__cta { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); font-size: var(--font-size-body-sm); font-weight: 600; color: var(--color-primary); }

/* ---------- Ecossistema ------------------------------------------------ */

.ecosystem { display: grid; gap: var(--space-5); }
@media (min-width: 800px) { .ecosystem { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } }
.platform .surface__body { display: grid; gap: var(--space-4); align-content: start; }
.platform__mark { display: inline-flex; width: 48px; height: 48px; }
.platform__name { font-size: var(--font-size-heading-2); line-height: var(--line-height-heading-2); letter-spacing: var(--tracking-heading-2); font-weight: 600; }
.platform__desc { color: var(--color-text-secondary); max-width: 46ch; }
.platform .button { margin-top: var(--space-2); justify-self: start; }

/* ---------- Rodapé ------------------------------------------------------ */


/* ---------- Mosaico ----------------------------------------------------- */

.mosaic {
  display: grid; grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 502fr 712fr; gap: var(--space-3);
  aspect-ratio: 2430 / 1252;
}
.mosaic__tile { overflow: hidden; border-radius: var(--radius-card); background: var(--color-surface-subtle); }
.mosaic__tile img { width: 100%; height: 100%; object-fit: cover; }
.mosaic__tile--1 { grid-column: span 4; }
.mosaic__tile--2 { grid-column: span 5; }
.mosaic__tile--3 { grid-column: span 3; }
.mosaic__tile--4 { grid-column: span 4; }
.mosaic__tile--5 { grid-column: span 4; }
.mosaic__tile--6 { grid-column: span 4; }
@media (max-width: 767px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; gap: var(--space-2); aspect-ratio: auto; }
  .mosaic__tile { grid-column: span 1; aspect-ratio: 4 / 3; }
}

/* ---------- Entrada de conteúdo ----------------------------------------- */

.reveal { opacity: 0; transform: translateY(12px); }
.reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity var(--duration-slow) var(--ease-standard),
              transform var(--duration-slow) var(--ease-standard);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .tl__nav-btn:active { transform: none; }
}