/*
 * Hero aprovado — referência 1600 x 900.
 * O asset hero-reference.webp é o recorte exato do corpo do hero (1600 x 772),
 * abaixo do header de 128 px da referência. Em desktop ele é renderizado sem
 * filtros, recortes ou elementos duplicados. O HTML permanece no DOM para
 * semântica/acessibilidade e o CTA continua clicável por hotspot transparente.
 */
:root{
  --ref-header-h:128px;
  --ref-hero-w:1600;
  --ref-hero-h:772;
  --ref-gold:#c79a52;
}

@media (min-width:981px){
  :root{
    --header-h:clamp(84px,8vw,var(--ref-header-h));
  }

  /* Header vivo, proporcional à referência aprovada. */
  .site-header{
    position:sticky;
    top:0;
    min-height:var(--header-h);
    padding:clamp(14px,1.125vw,18px) clamp(34px,5.5vw,88px);
    gap:clamp(24px,3vw,56px);
    background:
      radial-gradient(circle at 94% 24%,rgba(160,105,41,.16),transparent 21%),
      linear-gradient(90deg,#050505 0%,#060606 72%,#0b0805 100%);
    border-bottom:1px solid rgba(199,154,82,.16);
    box-shadow:none;
  }

  .brand{
    min-width:clamp(230px,25.6vw,410px);
    flex:0 0 auto;
  }

  .header-logo{
    width:clamp(230px,23.125vw,370px);
    max-width:none;
    max-height:clamp(56px,4.875vw,78px);
  }

  .nav{
    margin-left:auto;
    gap:clamp(16px,2.25vw,42px);
    font-size:clamp(11px,.8125vw,13px);
    color:#e4dfd7;
  }

  .nav-cta{
    min-width:clamp(96px,7.5vw,120px);
    padding:clamp(11px,.875vw,14px) clamp(18px,1.5vw,24px);
    text-align:center;
    border-color:rgba(199,154,82,.82);
    background:rgba(199,154,82,.015);
  }

  /*
   * O erro anterior vinha daqui: hero-reference.webp já contém toda a arte do
   * hero, mas texto/card HTML eram desenhados novamente por cima. Agora o asset
   * é mostrado na proporção nativa exata (1600/772), sem cover, filtro ou zoom.
   */
  .hero{
    position:relative;
    width:100%;
    height:auto;
    min-height:0 !important;
    aspect-ratio:1600 / 772;
    overflow:hidden;
    isolation:isolate;
    background:#050403;
  }

  .hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    display:block;
    background:url("assets/hero-reference.webp?v=8") 0 0 / 100% 100% no-repeat;
    filter:none;
    transform:none;
    mask-image:none;
  }

  .hero::after,
  .hero-glow,
  .hero-monogram{
    display:none !important;
  }

  /* Mantém a estrutura semântica sem redesenhar texto/card já presentes na arte. */
  .hero-grid{
    position:absolute;
    inset:0;
    z-index:2;
    display:block;
    width:100%;
    min-height:0;
    height:100%;
    padding:0;
    margin:0;
    pointer-events:none;
  }

  .hero-copy{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    max-width:none;
    opacity:1 !important;
    transform:none !important;
    text-shadow:none;
    pointer-events:none;
  }

  .hero-copy > .hero-eyebrow,
  .hero-copy > h1,
  .hero-copy > .hero-text,
  .hero-copy > .hero-signature,
  .hero-copy > .hero-note,
  .hero-panel-wrap,
  .hero-bottom{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0 0 0 0) !important;
    clip-path:inset(50%) !important;
    white-space:nowrap !important;
    border:0 !important;
  }

  /*
   * Hotspot do botão visível na própria imagem de referência.
   * Coordenadas proporcionais ao original 1600 x 772:
   * x=89, y=524, w=348, h=58.
   */
  .hero-actions{
    position:absolute;
    left:5.5625%;
    top:67.8756%;
    width:21.75%;
    height:7.513%;
    margin:0;
    display:block;
    pointer-events:auto;
  }

  .hero-primary{
    position:absolute;
    inset:0;
    width:100%;
    min-width:0;
    min-height:0;
    height:100%;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
    color:transparent;
    text-shadow:none;
    font-size:0;
    opacity:1;
    pointer-events:auto;
  }

  .hero-primary span{
    display:none;
  }

  .hero-primary:hover{
    background:rgba(199,154,82,.055);
    box-shadow:inset 0 0 0 1px rgba(224,184,111,.48);
  }

  .hero-primary:focus-visible{
    outline:2px solid #e0b86f;
    outline-offset:3px;
  }
}

/*
 * Em tablet/mobile mantemos o hero HTML responsivo de styles.css.
 * Importante: não reutilizar a referência desktop como background nesses
 * breakpoints, pois ela já contém textos e geraria duplicação novamente.
 */
@media (max-width:980px){
  .hero{
    aspect-ratio:auto;
    background:
      radial-gradient(ellipse at 67% 26%,rgba(179,126,48,.15) 0%,rgba(89,57,21,.06) 31%,transparent 61%),
      linear-gradient(112deg,#030303 0%,#080604 58%,#0b0805 100%);
  }

  .hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-4;
    pointer-events:none;
    display:block;
    background:
      linear-gradient(90deg,rgba(0,0,0,.18),transparent 45%,rgba(0,0,0,.12)),
      repeating-linear-gradient(90deg,transparent 0 83px,rgba(198,161,91,.018) 84px 85px,transparent 86px 166px);
    filter:none;
    transform:none;
    mask-image:linear-gradient(90deg,transparent 0 38%,#000 55% 100%);
  }

  .hero::after{
    content:"";
    display:block;
    position:absolute;
    inset:0;
    z-index:-3;
    pointer-events:none;
    background:
      radial-gradient(ellipse at center,transparent 34%,rgba(0,0,0,.16) 72%,rgba(0,0,0,.48) 100%),
      linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.08) 58%,rgba(0,0,0,.48));
  }
}