/*
 * Benvenuto — folha de estilos global.
 * A maior parte do layout usa estilos inline semânticos no HTML (composição local);
 * aqui ficam apenas regras que NÃO podem ser inline: @font-face/reset, @keyframes,
 * estados :hover de classe e media queries responsivas.
 */
html { scroll-behavior: auto; }
  *, *::before, *::after { box-sizing: border-box; }
  body { margin:0; background:#0B0A09; color:#ECE6DA; font-family:'Hanken Grotesk', sans-serif; -webkit-font-smoothing:antialiased; overflow-x: hidden; }
  img { max-width: 100%; }
  ::selection { background:rgba(201,168,106,0.30); color:#FFF6E6; }
  a { color:inherit; }
  /* anel dourado consistente com a marca ao navegar por teclado, em vez do
     azul padrão do navegador — só aparece em :focus-visible (teclado), não
     ao clicar com mouse */
  a:focus-visible, button:focus-visible {
    outline: 2px solid #C9A86A;
    outline-offset: 3px;
    border-radius: 2px;
  }
  @keyframes bv-glow { 0%,100%{opacity:.5} 50%{opacity:.85} }
  @keyframes bv-haloPulse { 0%,100%{ opacity:.35; transform:scale(1) } 50%{ opacity:.6; transform:scale(1.06) } }
  @keyframes bv-sheen { 0%{ background-position:-150% 0 } 60%,100%{ background-position:250% 0 } }
  @keyframes bv-rise { 0%{ opacity:0; transform:translateY(24px); filter:blur(4px) } 100%{ opacity:1; transform:none; filter:blur(0) } }
  @keyframes bv-floatUp { 0%,100%{ translate:0 0 } 50%{ translate:0 -12px } }
  .bv-phone { animation: bv-floatUp 6.5s ease-in-out infinite; will-change: translate; transition: filter .4s ease, scale .4s ease; }
  .bv-stack:hover .bv-phone { animation-play-state: paused; filter: brightness(0.42); scale: 0.95; }
  .bv-stack:hover .bv-phone:hover { animation-play-state: running; filter: brightness(1.08) drop-shadow(0 0 28px rgba(201,168,106,0.32)); scale: 1.07; z-index: 5 !important; }
  /* indicadores de posição do carrossel mobile — escondidos por padrão, só
     aparecem dentro do media query mobile abaixo */
  .bv-stack-dots { display:none; justify-content:center; align-items:center; gap:10px; margin-top:20px; }
  .bv-stack-dot {
    width:8px; height:8px; padding:0; border-radius:50%;
    border:1px solid rgba(201,168,106,0.5); background:transparent;
    cursor:pointer; transition: background .3s ease, transform .3s ease;
  }
  .bv-stack-dot[aria-selected="true"] { background:#C9A86A; transform:scale(1.25); }
  .bv-emblem-shimmer { background:linear-gradient(100deg, #B5935A 0%, #C9A86A 38%, #FFF4DC 50%, #C9A86A 62%, #B5935A 100%); background-size:250% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
  @media (max-width: 900px) {
    .bv-hero { min-height: auto !important; padding-top: 116px !important; padding-bottom: 80px !important; }
  }
  @media (max-width: 640px) {
    .bv-header { padding-left: 18px !important; padding-right: 18px !important; }
    .bv-hero { padding-top: 104px !important; }
    .bv-totop { width: 46px !important; height: 46px !important; right: 16px !important; bottom: 16px !important; }

    /* trio de celulares vira carrossel: arrasta pra rolar (scroll-snap
       nativo do navegador, sem reimplementar física de toque em JS) e toca
       num celular lateral pra centralizar ele (ver initPhoneCarousel em
       scripts/main.js). No desktop o layout "leque" fixo continua igual. */
    .bv-stack {
      justify-content: flex-start !important;
      align-items: center !important;
      gap: 16px !important;
      min-height: auto !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      scroll-snap-type: x mandatory !important;
      -webkit-overflow-scrolling: touch !important;
      scrollbar-width: none !important;
      -ms-overflow-style: none !important;
      padding: 32px calc(50% - 108px) !important;
    }
    .bv-stack::-webkit-scrollbar { display: none; height: 0; }
    .bv-phone {
      order: initial !important;
      width: 216px !important;
      /* SEM !important aqui de propósito — initPhoneCarousel() controla o
         transform/opacity via style inline conforme a posição no scroll
         (efeito "coverflow"); !important bloquearia isso, porque uma regra
         de stylesheet com !important sempre vence estilo inline, mesmo
         setado por JS depois */
      transform: none;
      opacity: 1;
      transition: transform 0.12s ease-out, opacity 0.12s ease-out;
      will-change: transform, opacity;
      margin: 0 !important;
      animation: none !important;
      scroll-snap-align: center;
    }
    .bv-stack:hover .bv-phone,
    .bv-stack .bv-phone:hover {
      filter: none !important;
      scale: 1 !important;
      z-index: auto !important;
    }
    .bv-stack-dots { display: flex; }
  }
  @media (max-height: 560px) {
    .bv-hero { min-height: auto !important; padding-top: 96px !important; padding-bottom: 64px !important; }
  }
  @keyframes bv-bounce { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(4px) } }
  .bv-principle { transition: background .35s ease, box-shadow .35s ease; }
  .bv-principle:hover { background:#15110C !important; box-shadow: inset 0 0 0 1px rgba(201,168,106,0.35); }
  .bv-principle .bv-pnum { transition: color .35s ease; }
  .bv-principle:hover .bv-pnum { color:#E7C982; }
  .bv-portrait img { transition: transform 1.2s cubic-bezier(0.2,0.7,0.2,1); }
  .bv-portrait:hover img { transform: scale(1.05); }
  .bv-cta-arrow { display:inline-block; animation: bv-bounce 2.2s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce) { * { animation:none !important; } }