/*
  Coloque os arquivos da Helvetica nesta mesma pasta com esses nomes
  (ou ajuste os "src" abaixo para os nomes reais dos seus arquivos).
*/
@font-face{
  font-family: 'Helvetica Local';
  src: url('Helvetica.woff2') format('woff2'),
       url('Helvetica.ttf') format('truetype'),
       url('Helvetica.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Se você tiver também um arquivo da versão bold, descomente abaixo,
   ajuste o nome do arquivo e mude o font-weight do .headline pra 700
@font-face{
  font-family: 'Helvetica Local';
  src: url('Helvetica-Bold.woff2') format('woff2'),
       url('Helvetica-Bold.ttf') format('truetype'),
       url('Helvetica-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
*/

:root{
  --black: #000000;
  --red: #ee1c1c;
  --white: #ffffff;
  --frame: 10px;
}

*{ box-sizing: border-box; margin: 0; padding: 0; }
html, body{ height: 100%; }

body{
  background: var(--red);
  color: var(--white);
  font-family: 'Helvetica Local', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow-x: hidden;
}

a{ color: inherit; text-decoration: none; }

/* moldura vermelha ao redor de toda a página */
.hero{
  min-height: 100svh;
  background: var(--black);
  margin: var(--frame);
  border-radius: 2px;
  padding: clamp(1.5rem, 4vw, 3.2rem) clamp(1.5rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
}
@media (min-width: 480px){
  :root{ --frame: 14px; }
}

/* wordmark (logo) pequeno no topo, centralizado */
.mark{
  display: flex;
  justify-content: center;
}
.mark img{
  max-width: clamp(120px, 16vw, 200px);
  max-height: clamp(40px, 6vw, 64px);
  width: auto;
  height: auto;
  display: block;
}
.mark span{
  display: none; /* aparece só se a logo.png não carregar (via script.js) */
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  color: var(--red);
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  letter-spacing: -0.01em;
}

/* headline gigante, fonte justa (letras e linhas coladas) */
.headline{
  font-family: 'Helvetica Local', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-synthesis: none;
  text-transform: uppercase;
  color: var(--white);
  font-size: clamp(3rem, 10.5vw, 9.5rem);
  line-height: 0.86;
  letter-spacing: -0.045em;
}
.headline .red{ color: var(--red); }

/* ícones sociais: círculo preto, contorno + brilho branco */
.social-row{
  display: flex;
  gap: 1.4rem;
}

/* MOBILE: ícones logo abaixo do texto, sempre visíveis sem precisar rolar */
@media (max-width: 700px){
  .hero{
    justify-content: flex-start;
    gap: 1.6rem;
  }
  .headline{
    font-size: clamp(2.4rem, 11vw, 3.6rem);
    line-height: 0.9;
  }
  .social-row{
    margin-top: 0.4rem;
  }
}
.icon-btn{
  width: clamp(56px, 8vw, 72px);
  height: clamp(56px, 8vw, 72px);
  border-radius: 50%;
  background: var(--black);
  border: 2px solid var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  box-shadow: 0 0 12px rgba(255,255,255,0.55), 0 0 2px rgba(255,255,255,0.9);
  transition: transform .18s ease, box-shadow .18s ease;
}
.icon-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(255,255,255,0.85), 0 0 4px rgba(255,255,255,1);
}
.icon-btn svg{
  width: 52%;
  height: 52%;
}