/* ═══════════════════════════════════════════════════════════════
   Celso Diniz — site.css
   Tokens do Design System v1.0 (escuro = padrão, claro opcional).
   Os estilos de cada peça seguem inline no index.php, como no protótipo;
   aqui ficam tema, estados, hover e todo o responsivo.
   ═══════════════════════════════════════════════════════════════ */

#site {
  --bg: #0B0A09; --surf: #141210; --surf2: #1D1A17;
  --line: rgba(240,176,96,.20); --line2: rgba(255,255,255,.10);
  --fg: #F6F1E9; --fg2: #B8AFA3; --fg3: #7E766C;
  --gold: #F0B060; --gold-ink: #F0B060; --gold-soft: rgba(240,176,96,.12);
  --copper: #A07050;
  --header-solid: rgba(11,10,9,.9);
}
html[data-theme="light"] #site {
  --bg: #FAF6F0; --surf: #FFFFFF; --surf2: #F1EAE0;
  --line: rgba(160,112,80,.28); --line2: rgba(23,19,15,.12);
  --fg: #17130F; --fg2: #5A5149; --fg3: #8B8177;
  --gold: #C0873A; --gold-ink: #8A5A16; --gold-soft: rgba(240,176,96,.16);
  --copper: #8A5A34;
  --header-solid: rgba(250,246,240,.92);
}
html[data-theme="light"] body { background: #FAF6F0; }

/* ── base do protótipo ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; -webkit-font-smoothing: antialiased; background: #0B0A09; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--gold); }
::selection { background: rgba(240,176,96,.28); }
[data-pane]::-webkit-scrollbar { width: 8px; }
[data-pane]::-webkit-scrollbar-track { background: transparent; }
[data-pane]::-webkit-scrollbar-thumb { border-radius: 999px; background: linear-gradient(180deg, #F7CE97, #F0B060 45%, #A07050); border: 2px solid transparent; background-clip: padding-box; }
[data-pane]::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #FFE0B0, #F0B060 45%, #C08A3E); background-clip: padding-box; }
@media (max-width: 719px) {
  #cd-logo { height: 30px !important; }
  #cd-hero-cta > a { flex: 1 1 100%; justify-content: center; }
  [data-m="stats"] { grid-template-columns: 1fr 1fr !important; }
  [data-m="stats"] > div { padding: 22px 8px !important; border-right: 0 !important; border-bottom: 1px solid var(--line2); }
  [data-m="stats"] > div:nth-child(odd) { border-right: 1px solid var(--line2) !important; }
  [data-m="masonry"] { columns: 2 !important; column-gap: 8px !important; }
  [data-m="masonry"] > div { margin-bottom: 8px !important; }
  [data-m="prod"] { grid-template-columns: 1fr !important; }
  [data-m="prod"] > img { aspect-ratio: 16/9; min-height: 0 !important; }
  [data-m="insta"] { grid-template-columns: repeat(3, 1fr) !important; gap: 4px !important; }
  [data-m="sobre-col"] { position: static !important; }
  [data-m="sobre-shot"] { height: 46svh !important; }
  [data-m="vshot"] { min-height: 38svh !important; flex: 0 0 auto !important; }
  [data-m="strip"] > div { width: 70vw !important; }
  [data-m="next"] > span:last-child { margin-left: 0 !important; }
  [data-pane] h1 { font-size: clamp(30px, 9.5vw, 44px) !important; }
  #pg-home h1 { font-size: clamp(40px, 12vw, 60px) !important; }
  #cd-wa { width: 52px !important; height: 52px !important; right: 14px !important; bottom: 14px !important; }
  #cd-rail { display: none !important; }
}
@keyframes cd-eq { from { transform: scaleY(.12); } to { transform: scaleY(1); } }
@keyframes cd-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes cd-ken { 0% { transform: scale(1.04) translate3d(0,0,0); } 100% { transform: scale(1.14) translate3d(0,-1.5%,0); } }
@keyframes cd-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes cd-scroll-hint { 0% { transform: translateY(0); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(12px); opacity: 0; } }

/* hover (gerado do style-hover do protótipo) */
@media (hover: hover) {
.h1:hover { border-color:#F0B060 !important; color:#F0B060 !important; }
.h2:hover { background:#F0B060 !important; color:#17130F !important; }
.h3:hover { background:rgba(255,255,255,.05) !important; }
.h4:hover { filter:brightness(1.1) !important; color:#fff !important; }
.h5:hover { border-bottom-color:var(--gold) !important; }
.h6:hover { border-color:var(--gold) !important; color:var(--gold) !important; }
.h7:hover { filter:brightness(1.07) !important; color:#17130F !important; }
.h8:hover { filter:brightness(1.09) !important; color:#fff !important; }
.h9:hover { background:rgba(240,176,96,.12) !important; color:#F0B060 !important; }
.h10:hover { border-color:var(--gold) !important; }
.h11:hover { background:var(--gold) !important; color:#17130F !important; }
.h12:hover { border-color:var(--line) !important; }
.h13:hover { transform:scale(1.05) !important; }
.h14:hover { background:rgba(255,255,255,.04) !important; }
.h15:hover { color:#F7CE97 !important; }
.h16:hover { background:rgba(23,19,15,.08) !important; color:#17130F !important; }
.h17:hover { border-color:var(--gold) !important; color:var(--gold-ink) !important; }
.h18:hover { filter:brightness(1.08) !important; }
.h19:hover { transform:scale(1.06) !important; }
.h20:hover { background:var(--surf2) !important; }
.h21:hover { opacity:.92 !important; }
.h22:hover { color:var(--gold) !important; }
.h24:hover { filter:brightness(1.06) !important; }
}
.f23:focus { border-color:var(--gold) !important; box-shadow:0 0 0 3px var(--gold-soft) !important; }

/* ── base e acessibilidade ─────────────────────────────────────── */
[hidden] { display: none !important; }
img, video { max-width: 100%; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--gold, #F0B060); outline-offset: 3px; }
.cd-skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: #F0B060; color: #17130F; font: 700 12px/1 'Archivo', sans-serif; letter-spacing: .1em; text-transform: uppercase; transition: top .2s ease; }
.cd-skip:focus { top: 12px; color: #17130F; }
body.cd-lock { overflow: hidden; }

/* ── cabeçalho ─────────────────────────────────────────────────── */
#cd-header.is-solid { background: var(--header-solid); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--line2) !important; }
#cd-header { padding-top: env(safe-area-inset-top); }
#cd-nav { display: none; }
#cd-burger { display: flex; }
#cd-nav a.is-on { color: var(--gold-ink); border-bottom-color: var(--gold) !important; }
@media (min-width: 1180px) {
  #cd-nav { display: flex; }
  #cd-burger { display: none; }
}
@media (max-width: 519px) { #cd-hire { display: none; } }

/* trilho lateral de pontos (telas largas) */
#cd-rail { display: none; }
#cd-rail.is-visible { opacity: 1 !important; }
#cd-rail a span { background: var(--fg3) !important; }
#cd-rail a.is-on span { background: var(--gold) !important; transform: scale(1.9); }
@media (min-width: 1240px) { #cd-rail { display: flex; } }

/* WhatsApp flutuante: aparece depois do topo */
#cd-wa.is-visible { opacity: 1 !important; visibility: visible !important; transform: none !important; }
#cd-wa { margin-bottom: env(safe-area-inset-bottom); }

/* ── topo (hero) ───────────────────────────────────────────────── */
#cd-hero-video.is-playing { opacity: 1 !important; }
@media (max-width: 719px) {
  #cd-hero-sig { position: static !important; width: min(200px, 52vw) !important; }
}

/* ── menu (gaveta) ─────────────────────────────────────────────── */
@media (min-width: 700px) {
  #cd-drawer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* ── chips (filtros e tipo de evento) ──────────────────────────── */
.cd-chip { font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; color: var(--fg2); cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.cd-chip.is-on { background: var(--gold); border-color: var(--gold); color: #17130F; font-weight: 700; }
@media (hover: hover) { .cd-chip:not(.is-on):hover { border-color: var(--gold); color: var(--gold-ink); } }

/* ── agenda ────────────────────────────────────────────────────── */
@media (hover: hover) { .cd-cal-show:hover { filter: brightness(1.08); } }

/* ── formulário ────────────────────────────────────────────────── */
.cd-label { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--fg3); }
.cd-input { font-family: inherit; font-size: 16px; padding: 14px 16px; min-width: 0; width: 100%; background: var(--surf); border: 1px solid var(--line2); border-radius: 2px; color: var(--fg); outline: none; -webkit-appearance: none; appearance: none; }
.cd-input::placeholder { color: var(--fg3); opacity: 1; }
.cd-input[aria-invalid="true"] { border-color: #E0705A; }
input[type="date"].cd-input { min-height: 52px; color-scheme: dark; }
html[data-theme="light"] input[type="date"].cd-input { color-scheme: light; }
.cd-linkbtn { border: 0; padding: 0; background: none; font-size: 12px; font-weight: 600; color: var(--fg3); cursor: pointer; }
@media (hover: hover) { .cd-linkbtn:hover { color: var(--gold-ink); } }

/* ── player de vídeo (modal) ───────────────────────────────────── */
#cd-vbody { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
#cd-vlist { border-top: 1px solid rgba(255,255,255,.1); }
#cd-vlist a.is-on { background: rgba(240,176,96,.12); box-shadow: inset 2px 0 0 #F0B060; }
#cd-vstage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; }
@media (min-width: 900px) {
  #cd-vbody { grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 400px); overflow: hidden; }
  #cd-vlist { border-top: 0; border-left: 1px solid rgba(255,255,255,.1); }
}
@media (max-width: 899px) {
  #cd-vmodal [data-m="vshot"] { flex: 0 0 auto !important; aspect-ratio: 16 / 9; min-height: 0 !important; }
}

/* ── lightbox das fotos ────────────────────────────────────────── */
#cd-lightbox { position: fixed; inset: 0; z-index: 85; display: flex; align-items: center; justify-content: center; padding: clamp(12px, 4vw, 48px); background: rgba(6,5,5,.96); }
#cd-lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border: 1px solid rgba(240,176,96,.22); border-radius: 2px; }
#cd-lightbox button { position: absolute; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(240,176,96,.4); border-radius: 999px; background: rgba(7,6,6,.6); color: #F0B060; cursor: pointer; }
#cd-lightbox [data-lb="fechar"] { top: max(14px, env(safe-area-inset-top)); right: 14px; }
#cd-lightbox [data-lb="ant"] { left: 14px; top: 50%; transform: translateY(-50%); }
#cd-lightbox [data-lb="prox"] { right: 14px; top: 50%; transform: translateY(-50%); }
#cd-lightbox .cd-lb-cap { position: absolute; left: 0; right: 0; bottom: max(16px, env(safe-area-inset-bottom)); text-align: center; font: 600 13px/1.4 'Archivo', sans-serif; color: #B8AFA3; }
[data-foto].is-out { display: none; }

/* ── aviso curto (toast) ───────────────────────────────────────── */
#cd-toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 95; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 12px 20px; border-radius: 999px; background: #17130F; border: 1px solid rgba(240,176,96,.45); color: #F6F1E9; font: 600 13px/1.3 'Archivo', sans-serif; box-shadow: 0 16px 40px -16px rgba(0,0,0,.8); transition: opacity .3s ease, transform .3s ease; max-width: calc(100vw - 32px); text-align: center; }
#cd-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ── tablet ────────────────────────────────────────────────────── */
@media (min-width: 720px) and (max-width: 1179px) {
  [data-m="stats"] { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ── celular/tablet deitado (pouca altura) ─────────────────────── */
@media (orientation: landscape) and (max-height: 540px) {
  .cd-sticky { position: static !important; }
  .cd-sticky h1, .cd-sticky h2 { font-size: clamp(28px, 5vw, 40px) !important; margin-bottom: 6px !important; }
  #pg-home h1 { font-size: clamp(30px, 5.4vw, 44px) !important; }
  #pg-home > div:first-of-type { padding-top: 78px !important; gap: 12px !important; }
  #cd-hero-sig { position: static !important; width: 140px !important; }
  #cd-hero-cta > a { padding: 13px 22px !important; }
  [data-m="sobre-col"] { position: static !important; }
  [data-m="sobre-shot"] { height: 70svh !important; }
  #pg-sobre [data-pane] > div { padding-top: 84px !important; }
  #cd-drawer-grid a { aspect-ratio: 16 / 9 !important; }
  #cd-vmodal [data-m="vshot"] { height: 70svh; aspect-ratio: auto; }
}

/* ── movimento reduzido ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
