/* Farol Digital, site v5: ABERTURA = o bloco "hero" do primeiro protótipo (faroldigital90.netlify.app), copiado
   regra por regra de _trabalho/prototipo-netlify/style.css. Mesma foto, mesmo enquadramento (object-position 72%,
   scale 1.06), mesmo feixe (dois conic-gradient), mesma lâmpada e a mesma profundidade em WebGL.
   Só muda a fonte de apoio (Poppins no lugar de Inter e JetBrains Mono, que não estão hospedadas aqui). */
.hero {
  --night: #060a0f; --paper: #f3efe7; --muted: #9aa6b2; --sol: #ffc400; --sol-hi: #ffd84d;
  position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; isolation: isolate; cursor: crosshair;
  color: var(--paper);
}
.hero a, .hero button { cursor: pointer; }
.hero__scene {
  position: absolute; inset: 0; z-index: 0; transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1.06);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, rgba(0, 0, 0, .6) 78%, transparent 98%);
          mask-image: linear-gradient(180deg, #000 55%, rgba(0, 0, 0, .6) 78%, transparent 98%);
}
.pulse {
  position: absolute; left: var(--lx); top: var(--ly); z-index: 4; width: 0; height: 0; border-radius: 50%; pointer-events: none;
  transform: translate(-50%, -50%); border: 1px solid rgba(255, 225, 150, .8);
  box-shadow: 0 0 40px rgba(255, 200, 90, .6), inset 0 0 40px rgba(255, 200, 90, .4);
  animation: pulse 1.6s cubic-bezier(.2, .7, .2, 1) forwards;
}
@keyframes pulse { to { width: 180vmax; height: 180vmax; opacity: 0; } }
.hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% center; z-index: -3; max-width: none; }
.hero__depth { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -3; opacity: 0; transition: opacity .8s ease; }
.hero__depth.is-ready { opacity: 1; }
.hero__tint {
  position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(90deg, rgba(6, 10, 15, .78) 0%, rgba(6, 10, 15, .35) 50%, rgba(6, 10, 15, 0) 75%);
}
.hero__shade { position: absolute; inset: 0; z-index: 1; background: #020407; opacity: .9; transition: opacity 1.8s ease; pointer-events: none; }
.is-lit .hero__shade { opacity: 0; }
.hero__beam {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen;
  --w: 22deg;
  opacity: var(--beam, 0);
  background:
    conic-gradient(from calc(var(--a, 270deg) - var(--w) / 2) at var(--lx) var(--ly),
      transparent 0deg, rgba(255, 214, 120, .62) calc(var(--w) * .5), transparent var(--w)),
    conic-gradient(from calc(var(--a, 270deg) - var(--w)) at var(--lx) var(--ly),
      transparent 0deg, rgba(255, 190, 80, .2) var(--w), transparent calc(var(--w) * 2));
  -webkit-mask-image: radial-gradient(circle at var(--lx) var(--ly), #000 4%, rgba(0,0,0,.5) 40%, transparent 85vmax);
          mask-image: radial-gradient(circle at var(--lx) var(--ly), #000 4%, rgba(0,0,0,.5) 40%, transparent 85vmax);
}
.lamp { position: absolute; left: var(--lx); top: var(--ly); z-index: 3; width: 0; height: 0; pointer-events: none; }
.lamp::before, .lamp::after { content: ''; position: absolute; border-radius: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity .25s, transform .35s cubic-bezier(.2, .7, .2, 1); }
.is-boost .lamp::before { transform: translate(-50%, -50%) scale(1.8); }
.is-boost .lamp::after { transform: translate(-50%, -50%) scale(1.6); }
.lamp::before { width: calc(var(--ls, 1) * 520px); height: calc(var(--ls, 1) * 520px); background: radial-gradient(circle, rgba(255, 200, 90, .55), rgba(255, 170, 60, .15) 35%, transparent 70%); mix-blend-mode: screen; }
.lamp::after { width: calc(var(--ls, 1) * 46px); height: calc(var(--ls, 1) * 46px); background: radial-gradient(circle, #fff 0, #ffe7a3 35%, rgba(255, 196, 0, 0) 72%); }
.is-flash .lamp::before, .is-flash .lamp::after, .is-lit .lamp::before, .is-lit .lamp::after { opacity: 1; }

.hero .container { max-width: 1200px; margin: 0 auto; padding-left: 16px; padding-right: 16px; position: relative; }
@media (min-width: 760px) { .hero .container { padding-left: 40px; padding-right: 40px; } }
.hero__inner { z-index: 4; width: 100%; padding-top: 96px; padding-bottom: 96px; }
.hero h1 { font-family: var(--serifa); font-weight: 400; letter-spacing: -.01em; font-size: clamp(48px, 7.4vw, 104px); line-height: .98; margin: 0 0 24px; max-width: 760px; color: var(--paper); }
.hero h1 em { font-style: italic; color: var(--sol-hi); }
.hero .pill {
  display: inline-block; font: 500 11px/1 var(--sans); text-transform: uppercase; letter-spacing: .14em;
  padding: 8px 12px; border-radius: 999px; margin: 0 0 24px;
  background: rgba(255, 196, 0, .12); color: var(--sol-hi); border: 1px solid rgba(255, 196, 0, .3);
}
.hero__lead { max-width: 480px; color: #c9d1d8; font-size: 17px; line-height: 1.6; margin: 0 0 32px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border-radius: 8px; text-decoration: none;
  font: 500 12px/1 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: inherit;
  transition: background .2s, border-color .2s, transform .2s;
}
.hero .btn:active { transform: scale(.97); }
.hero .btn--light { background: var(--paper); color: #111; }
.hero .btn--light:hover { background: #fff; }
.hero .btn--glass { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hero .btn--glass:hover { background: rgba(255, 255, 255, .14); }
.hero__scroll { position: absolute; z-index: 4; left: 50%; bottom: 28px; transform: translateX(-50%); margin: 0; font: 500 11px var(--sans); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); white-space: nowrap; }

@media (max-width: 759px) {
  .hero { align-items: flex-end; }
  .hero__photo { object-position: 76% center; }
  .hero__tint { background: linear-gradient(180deg, rgba(6, 10, 15, .1) 20%, rgba(6, 10, 15, .85) 70%, var(--night) 100%); }
  .hero__inner { padding-bottom: 88px; }
}

[data-reveal] { transition: opacity .8s ease, transform .8s ease, filter .8s ease; }
.is-intro [data-reveal] { opacity: 0; transform: translateY(14px); filter: blur(8px); }
.is-intro [data-reveal].on { opacity: 1; transform: none; filter: none; }
.is-intro .hero__scroll[data-reveal] { transform: translateX(-50%) translateY(14px); }
.is-intro .hero__scroll[data-reveal].on { transform: translateX(-50%); }

/* Estrelas do protótipo: atrás da página toda (o céu da viagem fica por baixo delas) */
.estrelas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .hero *, .hero *::before, .hero *::after { transition: none !important; animation: none !important; }
}

/* Topo em celular estreito (375 px): marca, Menu e WhatsApp numa linha só */
@media (max-width: 400px) {
  .topo-barra { gap: 8px; padding-left: 12px; }
  .marca { gap: 8px; font-size: 0.9rem; }
  .menu-botao { padding: 0 10px; }
  .botao-topo { padding: 0 12px; }
}