/* R.Z. VAUN — folha responsiva consolidada. */
:root { --bg:#0a0a0c; --card:#121216; --orange:#ff6b1a; --orange-dark:#e55a0a; --text:#f5f5f5; --muted:#b0b0b8; --border:#2a2a32; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { background:var(--bg); color:var(--text); font-family:'Segoe UI',system-ui,-apple-system,sans-serif; line-height:1.6; min-width:0; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button { cursor:pointer; }
img,video { max-width:100%; }
a { color:inherit; }
:focus-visible { outline:3px solid #ffb689; outline-offset:4px; }
[hidden] { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:-100px; left:12px; z-index:500; padding:12px; background:var(--orange); color:#17100a; }
.skip-link:focus { top:12px; }
header { position:relative; z-index:100; padding:10px max(5%,env(safe-area-inset-left)); display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--border); background:var(--bg); }
.logo { display:flex; align-items:center; flex-shrink:0; }
.brand-logo { display:block; width:144px; height:auto; object-fit:contain; }
nav { display:flex; align-items:center; flex-wrap:wrap; gap:8px 26px; }
nav a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; font-size:.95rem; }
nav a:hover { color:var(--orange); }
.menu-toggle { display:none; min-height:44px; padding:8px 16px; border:1px solid var(--border); border-radius:4px; color:var(--text); background:var(--card); }
section { padding:clamp(40px,6vw,80px) 5%; scroll-margin-top:20px; }
h2 { text-align:center; font-size:clamp(1.6rem,3vw,2rem); margin-bottom:.5rem; line-height:1.25; }
.section-sub { max-width:620px; text-align:center; color:var(--muted); margin:0 auto 2.5rem; }
.hero { position:relative; padding:0 0 2.5rem; text-align:center; }
.hero-media { position:relative; width:100%; max-width:3840px; aspect-ratio:16/9; margin:0 auto; background:#000; }
.hero-brand-image { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; }
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; opacity:0; pointer-events:none; }
.hero-video.is-playing { opacity:1; }
.hero-controls { display:flex; justify-content:flex-end; padding:8px 5%; min-height:60px; }
.hero-motion { position:static; color:var(--text); background:var(--card); border:1px solid var(--border); border-radius:4px; min-height:44px; padding:8px 14px; font-size:.85rem; }
.hero-content { padding:1.5rem 5% 1rem; }
.hero-content h1 { font-size:clamp(2.2rem,6vw,4.2rem); font-weight:700; letter-spacing:-1px; line-height:1.15; margin-bottom:.7rem; }
.hero-content h1 span { color:var(--orange); }
.tagline { font-size:1.25rem; color:var(--muted); margin-bottom:1.2rem; }
.subtitle { font-size:1.05rem; max-width:640px; margin:0 auto 2rem; color:#ddd; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; background:var(--orange); color:#17100a; padding:.85rem 2rem; text-align:center; text-decoration:none; border-radius:4px; font-weight:600; border:0; line-height:1.4; max-width:100%; }
.btn:hover { background:var(--orange-dark); }
.btn:disabled { background:var(--border); color:var(--muted); cursor:not-allowed; }
.platforms { display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem 1.8rem; color:var(--muted); font-size:.72rem; letter-spacing:1px; padding:1.5rem 5% 0; }
.filters { display:flex; justify-content:center; flex-wrap:wrap; gap:.7rem; margin-bottom:2rem; }
.filter-btn { min-height:44px; padding:.5rem 1.1rem; background:transparent; color:var(--muted); border:1px solid var(--border); border-radius:22px; font-size:.88rem; }
.filter-btn.active,.filter-btn:hover { color:#17100a; background:var(--orange); border-color:var(--orange); }
.formats-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.4rem; max-width:1440px; margin:0 auto; }
.format-card { min-width:0; background:var(--card); border:1px solid var(--border); border-radius:8px; overflow:hidden; cursor:pointer; transition:transform .2s; }
.format-card img { display:block; width:100%; aspect-ratio:3/4; height:auto; object-fit:cover; }
.format-info { padding:1.1rem; }
.format-info h3 { font-size:1.15rem; margin-bottom:.25rem; }
.genre { color:var(--orange); font-size:.8rem; letter-spacing:1px; text-transform:uppercase; margin-bottom:.5rem; }
.format-info p { color:var(--muted); font-size:.9rem; }
.results-count { text-align:center; color:var(--muted); margin-top:1.5rem; font-size:.85rem; }
.about { background:#0d0d10; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:3.5rem; align-items:center; }
.about>* { min-width:0; }
.about-text h2 { text-align:left; }
.about-text p { color:#ddd; margin-bottom:1rem; }
.stats { display:flex; flex-wrap:wrap; gap:1.2rem 2rem; margin-top:1.8rem; }
.stat strong { display:block; font-size:1.7rem; color:var(--orange); }
.stat span { font-size:.85rem; color:var(--muted); }
.company-details { max-width:640px; margin:1.5rem auto; overflow-wrap:anywhere; }
.company-details p+p { margin-top:.5rem; }
.company-details address { font-style:normal; color:var(--muted); margin-top:1rem; line-height:1.8; }
footer { background:#050507; text-align:center; padding:2.5rem 5%; border-top:1px solid var(--border); color:var(--muted); font-size:.88rem; overflow-wrap:anywhere; }
footer .logo { justify-content:center; margin-bottom:1rem; }
footer .brand-logo { width:min(100%,360px); }
.modal { display:none; position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.88); align-items:center; justify-content:center; padding:16px; overflow-y:auto; overscroll-behavior:contain; }
.modal.active { display:flex; }
.modal-content { position:relative; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:3.5rem 2rem 2rem; width:100%; max-width:480px; min-width:0; max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); overflow-y:auto; overscroll-behavior:contain; text-align:center; overflow-wrap:anywhere; }
.modal-content h3 { margin-bottom:.5rem; }
.modal-content p { color:var(--muted); font-size:.95rem; margin-bottom:1.2rem; }
.modal-content input { display:block; width:100%; padding:.85rem; margin-bottom:.9rem; background:#1a1a1e; border:1px solid var(--border); color:#fff; border-radius:6px; font-size:16px; }
.close-modal { position:absolute; top:6px; right:8px; display:grid; place-items:center; width:44px; height:44px; color:var(--text); background:var(--card); border:1px solid var(--border); border-radius:6px; font-size:1.6rem; line-height:1; z-index:2; }
.detail-modal { max-width:680px; text-align:left; }
.detail-cover { width:100%; height:clamp(120px,30vh,260px); object-fit:cover; border-radius:8px; display:block; margin-bottom:1rem; }
.detail-title { font-size:1.5rem; }
.detail-access { padding:1.25rem; border:1px solid var(--border); border-radius:8px; text-align:center; }
.video-box { background:#000; aspect-ratio:16/9; border-radius:8px; margin:1rem 0; display:flex; align-items:center; justify-content:center; color:var(--muted); overflow:hidden; }
.video-box iframe { width:100%; height:100%; border:0; }
.member-status { display:none; position:fixed; bottom:max(12px,env(safe-area-inset-bottom)); right:12px; max-width:calc(100% - 24px); z-index:90; background:var(--orange); color:#17100a; padding:.5rem 1rem; border-radius:20px; font-size:.8rem; pointer-events:none; }
.member-status.active { display:block; }
body.dialog-open { overflow:hidden; }
@media (hover:hover) { .format-card:hover { transform:translateY(-4px); } }
@media (max-width:1000px) { .formats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .about { gap:2rem; } }
@media (max-width:800px) { .about { grid-template-columns:minmax(0,1fr); } }
@media (max-width:700px) {
  header { padding:8px 5%; gap:16px; }
  header .brand-logo { width:120px; }
  .menu-toggle { display:block; }
  nav { display:none; position:absolute; top:100%; left:0; right:0; padding:12px 5% 20px; background:var(--bg); border-bottom:1px solid var(--border); box-shadow:0 14px 22px rgba(0,0,0,.4); }
  nav.is-open { display:flex; flex-direction:column; align-items:stretch; gap:4px; }
  nav a { font-size:1rem; padding:6px 10px; }
}
@media (max-width:560px) {
  .formats-grid { grid-template-columns:minmax(0,1fr); }
  .hero-controls { padding-top:6px; min-height:56px; }
  .hero-content { padding:1rem 5%; }
  .subtitle { font-size:1rem; }
  .modal { padding:10px; }
  .modal-content { padding:3.5rem 1.1rem 1.25rem; max-height:calc(100vh - 20px); max-height:calc(100dvh - 20px); }
  .stats { gap:1rem 1.5rem; }
  .btn { padding:.85rem 1.4rem; }
}
@media (max-height:500px) and (orientation:landscape) { header .brand-logo { width:96px; } .detail-cover { height:120px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; animation:none !important; } .hero-video,.hero-motion { display:none; } }
