/* Plataforma de Acesso FotoRAD — identidade Dellamarque
   Cores: Escuro #0C0F14 · Claro #FCFCFC · Laranja #FD4900 (destaque unico, <10%)
   Fonte: Inter. Flat por padrao; 1 sombra-ancora por tela. */

:root {
  --escuro: #0C0F14;
  --claro: #FCFCFC;
  --laranja: #FD4900;
  --laranja-hover: #D63D00;
  --laranja-suave: #FDE5D9;
  --tinta: #1D1D1F;
  --cinza-medio: #5D5D5D;
  --cinza-leve: #8F8F8F;
  --sobre-escuro: #A8A8A8;
  --superficie: #F5F5F6;
  --elevada: #FFFFFE;
  --borda-sutil: #EFEFEF;
  --borda: #DDDDDD;
  --erro: #7A1A1A;
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 20px; --pill: 9999px;
  --sombra-ancora: 0 12px 32px rgba(12,15,20,0.10);
  --sombra-media: 0 4px 12px rgba(12,15,20,0.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  background: var(--claro);
  color: var(--tinta);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.008em;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 980px; margin: 0 auto; padding: 24px 20px 96px; }
.topo { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 32px; }
.marca { font-weight: 800; font-size: 18px; color: var(--escuro); letter-spacing: -0.02em; }
.marca .dot { color: var(--laranja); }
/* "RAD" em laranja dentro de qualquer "FotoRAD" */
.rad { color: var(--laranja); }
.sair { font-size: 13px; color: var(--cinza-leve); text-decoration: none; }
.sair:hover { color: var(--cinza-medio); }

/* ---------- Botoes ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-weight: 600; font-size: 16px;
  border: 0; border-radius: var(--r-md); cursor: pointer;
  padding: 16px 28px; min-height: 44px; text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.btn-primario { background: var(--laranja); color: var(--claro); }
.btn-primario:hover { background: var(--laranja-hover); }
.btn-fantasma { background: var(--elevada); color: var(--laranja); border: 1px solid var(--laranja); }
.btn-fantasma:hover { background: var(--laranja-suave); }
.btn-bloco { width: 100%; }
.btn[disabled] { background: var(--superficie); color: var(--cinza-leve); cursor: not-allowed; }

/* ---------- Badge ---------- */
.badge {
  display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; padding: 4px 12px; border-radius: var(--pill);
  background: var(--laranja-suave); color: var(--laranja);
}
.badge-mudo { background: var(--superficie); color: var(--cinza-leve); border: 1px solid var(--borda); }

/* ---------- Login ---------- */
.login-box { max-width: 400px; margin: 6vh auto 0; text-align: center; }
.login-box h1 { font-size: clamp(28px, 5vw, 34px); font-weight: 700; color: var(--escuro);
  letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 10px; }
.login-box p.sub { color: var(--cinza-medio); margin-bottom: 28px; }
.campo { text-align: left; margin-bottom: 16px; }
.campo label { display: block; font-size: 13px; font-weight: 600; color: var(--escuro); margin-bottom: 6px; }
.campo input {
  width: 100%; font-family: inherit; font-size: 16px; color: var(--escuro);
  background: var(--elevada); border: 1px solid var(--borda); border-radius: var(--r-md);
  padding: 14px 16px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.campo input::placeholder { color: var(--cinza-leve); }
.campo input:focus { border-color: var(--laranja); box-shadow: 0 0 0 3px rgba(253,73,0,0.15); }
.apoio { font-size: 13px; color: var(--cinza-leve); margin-top: 16px; }
.erro { color: var(--erro); font-size: 14px; margin-bottom: 14px; }

/* ---------- Cards ---------- */
.titulo-sec { font-size: clamp(24px, 5vw, 30px); font-weight: 800; color: var(--escuro);
  letter-spacing: -0.022em; margin-bottom: 6px; }
.subtitulo-sec { color: var(--cinza-medio); margin-bottom: 32px; }
.cards { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 768px) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card { border-radius: var(--r-lg); padding: 24px; display: flex; flex-direction: column;
  min-height: 280px; position: relative; }
.card .tag { margin-bottom: 16px; }
.card h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.012em; margin-bottom: 8px; }
.card p { font-size: 15px; line-height: 1.45; margin-bottom: 20px; }
.card .acao { margin-top: auto; }

.card-claro { background: var(--elevada); border: 1px solid var(--borda-sutil); color: var(--tinta); }
.card-claro h3 { color: var(--escuro); }
.card-claro p { color: var(--cinza-medio); }

.card-escuro { background: var(--escuro); color: var(--claro); box-shadow: var(--sombra-ancora); }
.card-escuro h3 { color: var(--claro); }
.card-escuro h3 .dot { color: var(--laranja); }
.card-escuro p { color: var(--sobre-escuro); }

.card-mock { background: var(--superficie); border: 1px solid var(--borda); }
.card-mock h3 { color: var(--cinza-leve); }
.card-mock p { color: var(--cinza-leve); }
.card-mock .cadeado { position: absolute; top: 20px; right: 20px; font-size: 22px; opacity: .55; }

/* ---------- Gravacao ---------- */
.video-wrap { position: relative; padding-bottom: 56.25%; height: 0; border-radius: var(--r-lg);
  overflow: hidden; background: var(--escuro); box-shadow: var(--sombra-ancora); margin-bottom: 28px; }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.proximo { background: var(--elevada); border: 1px solid var(--borda-sutil); border-radius: var(--r-lg);
  padding: 28px; text-align: center; }
.proximo h2 { font-size: 22px; font-weight: 700; color: var(--escuro); margin-bottom: 8px; }
.proximo p { color: var(--cinza-medio); margin-bottom: 20px; }

/* ---------- Popup / Modal ---------- */
.overlay { position: fixed; inset: 0; background: rgba(12,15,20,0.50);
  display: none; align-items: center; justify-content: center; padding: 20px; z-index: 50; }
.overlay.aberto { display: flex; }
.modal { background: var(--claro); border-radius: var(--r-xl); padding: 32px; max-width: 440px;
  width: 100%; box-shadow: var(--sombra-ancora); position: relative; }
.modal h2 { font-size: 22px; font-weight: 700; color: var(--escuro); margin-bottom: 10px; letter-spacing: -0.012em; }
.modal p { font-size: 16px; color: var(--tinta); margin-bottom: 20px; }
.modal .preco { font-size: 36px; font-weight: 800; color: var(--escuro); margin: 4px 0 14px; }
.modal .data { font-size: 17px; font-weight: 600; color: var(--laranja); margin-bottom: 14px; }
.modal .fechar { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px;
  border: 0; background: none; font-size: 22px; color: var(--cinza-leve); cursor: pointer; line-height: 1; }
.modal .acoes { display: flex; flex-direction: column; gap: 10px; }
.modal .acoes-linha { display: flex; gap: 10px; }
.modal .acoes-linha .btn { flex: 1; }
.ok-msg { color: var(--escuro); font-weight: 600; }