/* ======================================================
   HORMA — FOLHA DE ESTILO PRINCIPAL
   ------------------------------------------------------
   ÍNDICE
   01. VARIÁVEIS / TOKENS
   02. RESET E BASE
   03. ELEMENTOS COMPARTILHADOS (quadrado, logo, foco)
   04. HEADER
   05. PALCO (hero + cards + foto lateral)
   06. HERO
   07. IMAGEM LATERAL / PARALLAX
   08. CARDS
   09. FOOTER
   10. ANIMAÇÕES (reveal)
   11. RESPONSIVIDADE
   12. ACESSIBILIDADE / MOVIMENTO REDUZIDO
   ====================================================== */


/* ======================================================
   01. VARIÁVEIS / TOKENS
   ALTERAR AQUI CORES, ESPAÇAMENTOS E ESCALA TIPOGRÁFICA
   ====================================================== */
:root {

  /* --- CORES --- */
  --branco:        #FFFFFF;
  --fundo:         #F4F4F2;   /* fundo geral, cinza claríssimo */
  --preto:         #0A0A0A;   /* títulos, quadrados, rodapé   */
  --texto:         #1A1A1A;
  --texto-suave:   #55554F;   /* parágrafos                    */
  --linha:         #E3E3DE;   /* hairlines                     */
  --linha-forte:   #C9C9C2;

  /* --- TIPOGRAFIA --- */
  --fonte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Peso do título do hero. Trocar para 900 se quiser ainda mais pesado. */
  --peso-titulo: 800;

  --fs-hero:      clamp(2.6rem, 6vw, 6.2rem);
  --fs-titulo-card: clamp(1.15rem, 1.55vw, 1.6rem);
  --fs-texto:     clamp(0.82rem, 0.9vw, 0.92rem);
  --fs-mini:      clamp(0.68rem, 0.78vw, 0.78rem);

  /* --- MEDIDAS --- */
  --margem:        clamp(20px, 3.1vw, 48px);  /* respiro lateral da página */
  --margem-extra:  clamp(20px, 4.6vw, 70px);  /* respiro à direita dos cards */
  --altura-header: 90px;
  --gap-cards:     clamp(14px, 1.3vw, 20px);
  --largura-foto:  33.6%;                     /* fotografia lateral        */

  /* --- MOVIMENTO --- */
  --easing: cubic-bezier(0.16, 0.84, 0.44, 1);
}


/* ======================================================
   02. RESET E BASE
   ====================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding-top: var(--altura-header);
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

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

h1, h2, p { margin: 0; }


/* ======================================================
   03. ELEMENTOS COMPARTILHADOS
   ====================================================== */

/* --- Quadrado preto (assinatura gráfica da marca) --- */
.quadrado {
  display: block;
  background: var(--preto);
  width: 14px;
  height: 14px;
  flex: none;
}
.quadrado--logo { width: 18px; height: 18px; }
.quadrado--menu { width: 9px;  height: 9px; }
.quadrado--hero { width: 15px; height: 15px; }
.quadrado--card { width: 13px; height: 13px; }

/* --- Logo --- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.logo__texto {
  font-weight: 800;
  font-size: clamp(1.25rem, 1.6vw, 1.65rem);
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
}

/* --- Foco visível para navegação por teclado --- */
a:focus-visible {
  outline: 2px solid var(--preto);
  outline-offset: 6px;
}

/* --- Atalho de acessibilidade --- */
.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--preto);
  color: var(--branco);
  padding: 12px 20px;
  font-size: 0.85rem;
}
.pular-para-conteudo:focus {
  left: 12px;
  top: 12px;
}


/* ======================================================
   04. HEADER
   Fundo claro, hairline inferior, fixo com leve blur ao rolar
   ====================================================== */
.cabecalho {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--altura-header);
  background: var(--fundo);
  border-bottom: 1px solid var(--linha);
  transition: background-color 0.45s var(--easing),
              box-shadow 0.45s var(--easing),
              backdrop-filter 0.45s var(--easing);
}

/* Estado aplicado via JavaScript ao rolar a página */
.cabecalho--rolado {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 24px rgba(0, 0, 0, 0.05);
}

.cabecalho__interno {
  height: 100%;
  padding: 0 var(--margem);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* --- MENU --- */
.menu {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 40px);
}
.menu__item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-mini);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: opacity 0.3s var(--easing);
}
.menu__item:hover { opacity: 0.55; }


/* ======================================================
   05. PALCO
   Envolve HERO + CARDS para que a fotografia lateral
   atravesse as duas seções, como na referência.
   ====================================================== */
.palco {
  position: relative;
  padding-bottom: clamp(40px, 4.4vw, 70px);
}


/* ======================================================
   06. HERO
   ====================================================== */
.hero {
  position: relative;
  z-index: 2;
  padding: clamp(38px, 4vw, 60px) var(--margem-extra) clamp(26px, 2.6vw, 38px) var(--margem);
}

.hero__interno {
  max-width: 62%;
}

.hero__sobretitulo {
  font-size: var(--fs-mini);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto);
  margin-bottom: clamp(10px, 1vw, 15px);
}

.hero__titulo {
  font-size: var(--fs-hero);
  font-weight: var(--peso-titulo);
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--preto);
}
.hero__linha { display: block; }

.quadrado--hero {
  margin: clamp(8px, 0.85vw, 12px) 0 clamp(12px, 1.2vw, 17px);
}

.hero__subtitulo {
  font-size: var(--fs-texto);
  font-weight: 400;
  line-height: 1.75;
  color: var(--texto-suave);
  max-width: 44ch;
}


/* ======================================================
   07. IMAGEM LATERAL / PARALLAX
   ALTERAR ESTA IMAGEM NO index.html
   ====================================================== */
.palco__foto {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--largura-foto);
  height: 68%;
  overflow: hidden;
  z-index: 1;
  background: #E9E9E5;
}

.palco__foto img {
  width: 100%;
  height: 118%;
  object-fit: cover;
  object-position: center;
  margin-top: -9%;   /* centraliza a sobra usada pelo parallax */
  /* O deslocamento do parallax é escrito pelo JavaScript */
  will-change: transform;
}


/* ======================================================
   08. CARDS
   ====================================================== */
.cards {
  position: relative;
  z-index: 3;
  padding: 0 var(--margem-extra) 0 var(--margem);
}

.cards__grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-cards);
}

/* --- Card --- */
.card {
  display: flex;
  flex-direction: column;
  background: var(--branco);
  transition: transform 0.55s var(--easing),
              box-shadow 0.55s var(--easing);
  will-change: transform;
}
.card:hover,
.card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 26px 60px -28px rgba(0, 0, 0, 0.28);
}

/* --- Mídia do card --- */
.card__midia {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2 / 1;
  background: #E9E9E5;
}
.card__zoom {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition: transform 0.85s var(--easing);
}
.card:hover .card__zoom,
.card:focus-visible .card__zoom { transform: scale(1.045); }

.card__midia img {
  width: 100%;
  height: 114%;
  object-fit: cover;
  object-position: center;
  margin-top: -7%;   /* centraliza a sobra usada pelo parallax */
  will-change: transform;
}

/* --- Corpo do card --- */
.card__corpo {
  padding: clamp(22px, 2.1vw, 32px) clamp(22px, 2.1vw, 32px) clamp(22px, 2vw, 30px);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.quadrado--card { margin-bottom: clamp(14px, 1.35vw, 20px); }

.card__titulo {
  font-size: var(--fs-titulo-card);
  font-weight: 400;
  letter-spacing: 0.055em;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--preto);
}

.card__risco {
  display: block;
  width: 74px;
  height: 1px;
  background: var(--linha-forte);
  margin: clamp(12px, 1.15vw, 16px) 0 clamp(12px, 1.15vw, 16px);
}

.card__texto {
  font-size: var(--fs-texto);
  line-height: 1.7;
  color: var(--texto-suave);
  margin-bottom: clamp(24px, 2.4vw, 34px);
}

/* --- Ação: botão ENTRAR + seta --- */
.card__acao {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.card__botao {
  font-size: var(--fs-mini);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--preto);
  position: relative;
  padding-bottom: 4px;
}
.card__botao::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--preto);
  transition: width 0.55s var(--easing);
}
.card:hover .card__botao::after,
.card:focus-visible .card__botao::after { width: 100%; }

.card__seta {
  color: var(--preto);
  display: inline-flex;
  transition: transform 0.55s var(--easing);
}
.card:hover .card__seta,
.card:focus-visible .card__seta { transform: translateX(10px); }


/* ======================================================
   09. FOOTER
   ====================================================== */
.rodape {
  background: var(--preto);
  color: var(--branco);
}

.rodape__interno {
  padding: clamp(22px, 2.2vw, 30px) var(--margem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.rodape__marca {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 36px);
}

.logo--rodape .logo__texto { font-size: clamp(1rem, 1.15vw, 1.15rem); }
.logo--rodape .quadrado--logo {
  background: var(--branco);
  width: 12px;
  height: 12px;
}
.logo--rodape:focus-visible { outline-color: var(--branco); }

.rodape__assinatura,
.rodape__direitos {
  font-size: var(--fs-mini);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.72);
}
.rodape__assinatura { text-transform: uppercase; letter-spacing: 0.12em; }


/* ======================================================
   10. ANIMAÇÕES — REVEAL AO SCROLL
   Aplicado por IntersectionObserver (script.js)
   ====================================================== */
.revelar {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1s var(--easing), transform 1s var(--easing);
}
.revelar--visivel {
  opacity: 1;
  transform: translateY(0);
}

/* Atraso em cascata para os cards */
.cards__grade .card:nth-child(1) { transition-delay: 0.00s, 0.00s; }
.cards__grade .card:nth-child(2) { transition-delay: 0.10s, 0.10s; }
.cards__grade .card:nth-child(3) { transition-delay: 0.20s, 0.20s; }

/* Sem JavaScript, o conteúdo permanece visível */
.sem-js .revelar { opacity: 1; transform: none; }


/* ======================================================
   11. RESPONSIVIDADE
   ====================================================== */

/* --- Notebooks menores --- */
@media (max-width: 1200px) {
  :root { --altura-header: 80px; }
  .hero__interno { max-width: 68%; }
  .card__texto br { display: none; }
}

/* --- Tablets em paisagem / iPad --- */
@media (max-width: 1024px) {
  :root { --largura-foto: 30%; }
  .hero__interno { max-width: 72%; }
  .palco__foto { height: 62%; }
  .cards__grade { gap: 16px; }
  .hero__subtitulo br { display: none; }
}

/* --- Tablets em retrato: cards empilham em 1 coluna --- */
@media (max-width: 900px) {
  .palco {
    display: flex;
    flex-direction: column;
  }

  /* Ordem em telas pequenas: hero → foto → cards */
  .hero  { order: 1; padding-right: var(--margem); }
  .palco__foto { order: 2; }
  .cards { order: 3; padding-right: var(--margem); }

  .hero__interno { max-width: 100%; }

  /* A fotografia deixa de ser absoluta e vira um bloco */
  .palco__foto {
    position: relative;
    width: 100%;
    height: 46vh;
    min-height: 280px;
    margin-bottom: clamp(28px, 5vw, 48px);
  }

  .cards__grade { grid-template-columns: 1fr; gap: 20px; }
  .card__midia { aspect-ratio: 16 / 9; }

  /* Sem hover em toque: mantém tudo estável */
  .card:hover { transform: none; box-shadow: none; }
}

/* --- Celulares --- */
@media (max-width: 640px) {
  :root {
    --altura-header: 68px;
    --margem: 20px;
    --margem-extra: 20px;
  }

  .hero { padding-top: 40px; padding-bottom: 34px; }
  .hero__titulo { letter-spacing: -0.025em; }
  .hero__subtitulo br { display: none; }
  .card__texto br,
  .hero__subtitulo br { display: none; }

  .palco__foto { height: 38vh; min-height: 240px; }

  .card__corpo { padding: 26px 22px 28px; }

  .rodape__interno {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-top: 28px;
    padding-bottom: 28px;
  }
  .rodape__marca { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* --- Celulares pequenos --- */
@media (max-width: 400px) {
  .menu__item span:first-child { letter-spacing: 0.1em; }
  .card__seta svg { width: 44px; }
}


/* ======================================================
   12. ACESSIBILIDADE / MOVIMENTO REDUZIDO
   ====================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }

  .revelar { opacity: 1; transform: none; }
  .palco__foto img,
  .card__midia img { transform: none !important; }
}