/* Warehouse v2: tokens e base.
   Mapa mental 2 (19/09). Duas teses:
   1. O CHANFRO. O lettering da marca e feito de cortes a 45 graus. Essa forma
      vira a mascara por onde a imagem nasce no hero, e a geometria de todo
      container. Vem de motion/mascara-arco-reveal-era: a forma da mascara tem
      que vir do universo do cliente, nunca um circulo generico.
   2. A BRECHA. Cada container ocupa ~80% da tela e deixa uma faixa do proximo
      aparecendo. E o pedido literal do mapa e vira o ritmo da pagina. */

:root {
  --tinta:        #070908;
  --tinta-2:      #0e1110;
  --tinta-3:      #161a19;
  --brasa:        #fc3800;   /* o "H" do wordmark */
  --ferrugem:     #e4660c;   /* isotipo */

  --texto:        #ffffff;
  --texto-2:      rgba(255,255,255,.68);
  --texto-3:      rgba(255,255,255,.44);
  --linha:        rgba(255,255,255,.12);
  --linha-forte:  rgba(255,255,255,.26);

  --t-display: clamp(2.6rem, 1rem + 7vw, 7.5rem);
  --t-titulo:  clamp(1.8rem, 1rem + 3vw, 3.4rem);
  --t-sub:     clamp(1.1rem, .95rem + .7vw, 1.4rem);
  --t-corpo:   clamp(1rem, .96rem + .2vw, 1.0625rem);
  --t-micro:   .75rem;

  /* SF Pro, pedido no mapa. Nao e licenciavel para embutir na web, entao o
     stack usa a fonte ja instalada no aparelho Apple e cai em Inter fora dele,
     que tem metrica proxima. Nenhum arquivo da Apple e redistribuido. */
  --f-texto: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
             "Inter", "Helvetica Neue", Arial, sans-serif;
  --f-display: -apple-system, BlinkMacSystemFont, "SF Pro Display",
               "Inter", "Helvetica Neue", Arial, sans-serif;
  /* Sem monoespacada. O contrato do site e SF Pro em tudo; o rotulo micro se
     distingue por peso e espacamento, nao por trocar de familia. */
  --f-micro: var(--f-texto);

  --e-saida: cubic-bezier(.16, 1, .3, 1);
  /* Molas reais. cubic-bezier nao passa de 1, entao nao da overshoot; e o
     overshoot que separa motion de template de motion com peso.
     De motion/spring-linear-easing: guardar 3 curvas como token e usar so em
     transform e opacity. */
  --mola-suave: cubic-bezier(.2, .8, .2, 1);
  --mola-viva:  cubic-bezier(.2, .9, .2, 1);
  --d-curta: .2s;
  --d-media: .45s;
  --d-longa: .9s;

  --chanfro: 16px;
  --gutter: clamp(1.1rem, .5rem + 2.2vw, 3.2rem);
  --max: 1560px;

  /* a brecha: quanto do proximo container fica aparecendo */
  --altura-container: 82svh;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--tinta);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: var(--t-corpo);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;   /* `hidden` quebraria o position:sticky dos containers */
}

img, video, svg { display: block; max-width: 100%; }

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.028em;
  margin: 0;
  text-wrap: balance;
}

.display {
  font-size: var(--t-display);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.035em;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--brasa); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--brasa); color: #fff; }

.wrap {
  width: 100%; max-width: var(--max);
  margin-inline: auto; padding-inline: var(--gutter);
}

.rotulo {
  font-family: var(--f-micro);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-3);
  display: flex; align-items: center; gap: .65rem;
  margin: 0;
  /* rotulo longo (a lista de coberturas da frente) precisa quebrar em vez de
     escorrer para fora do gutter */
  flex-wrap: wrap;
  row-gap: .2rem;
}
.rotulo::before {
  content: ""; width: 20px; height: 1px; background: var(--brasa); flex: none;
}
.rotulo > * { min-width: 0; }

/* o chanfro como recorte reutilizavel */
.chanfro {
  clip-path: polygon(
    var(--chanfro) 0, 100% 0,
    100% calc(100% - var(--chanfro)), calc(100% - var(--chanfro)) 100%,
    0 100%, 0 var(--chanfro));
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--brasa); color: #fff; padding: .85rem 1.1rem;
  font-family: var(--f-micro); font-size: .875rem; font-weight: 500;
}
.skip:focus { left: .5rem; top: .5rem; }

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

@supports (animation-timing-function: linear(0, 1)) {
  :root {
    --mola-suave: linear(0, .112, .318, .544, .72, .846, .925, .968, .989, .998, 1);
    --mola-viva:  linear(0, .16, .43, .71, .92, 1.04, 1.07, 1.05, 1.02, 1.005, 1);
  }
}