/* Reaproveita os tokens de marca da Cinelândia */
:root{
  --void:#0A0908;
  --curtain:#1C1210;
  --curtain-2:#241713;
  --marquee-red:#9C2B2B;
  --gold:#C9A24B;
  --gold-bright:#F0CE7C;
  --cream:#F3E6C9;
  --ink:#EDE6D8;
  --muted:#B7AC96;
  --line: rgba(201,162,75,0.25);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

body{
  margin:0; min-height:100vh;
  background:var(--void); color:var(--ink);
  font-family:'Inter',sans-serif;
  line-height:1.6;
}
img{max-width:100%; display:block;}
a{color:inherit;}
button{font-family:inherit;}

/* CRÍTICO: garante que uma tela com o atributo hidden fique escondida
   de verdade, mesmo que a tela tenha um display específico (flex, grid...) */
.screen[hidden]{display:none !important;}

.bulb-strip{
  height:8px; width:100%;
  background-image: radial-gradient(circle, var(--gold-bright) 0 2.4px, transparent 2.5px);
  background-size: 24px 8px;
  background-position: center;
  background-color: var(--curtain-2);
}

.italic{font-family:'Playfair Display',serif; font-style:italic; font-weight:600; color:var(--gold-bright);}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-family:'Inter',sans-serif; font-weight:700; letter-spacing:0.02em;
  border-radius:3px; cursor:pointer; border:none; text-decoration:none;
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-gold{
  background:linear-gradient(180deg, var(--gold-bright), var(--gold));
  color:#241708; padding:15px 30px;
  box-shadow:0 6px 0 #8a6a26, 0 14px 24px rgba(0,0,0,0.4);
}
.btn-gold:hover{transform:translateY(-2px);}
.btn-large{font-size:16px; padding:16px 32px;}
.btn-full{width:100%;}

/* ============ TELAS ============ */
.screen{
  position:relative; min-height:calc(100vh - 8px);
  padding:40px 20px;
}
.screen:not([hidden]){animation: screenFadeIn 0.5s ease;}
@keyframes screenFadeIn{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}
.bg{position:fixed; inset:0; background-size:cover; background-position:center 25%; opacity:0.25; z-index:0;}
.bg-scrim{position:fixed; inset:0; z-index:0; background:linear-gradient(180deg, rgba(10,9,8,0.6), rgba(10,9,8,0.92));}

.brand{display:flex; align-items:center; gap:8px; position:relative; z-index:2;}
.brand--center{justify-content:center; margin-bottom:22px;}
.brand-mark{color:var(--gold-bright); font-size:16px;}
.brand-name{font-family:'Bebas Neue', sans-serif; font-size:24px; letter-spacing:0.05em; color:var(--cream);}

.section-eyebrow{
  font-size:12.5px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--gold); margin-bottom:8px; position:relative; z-index:2;
}
.section-eyebrow--center{text-align:center;}
.section-title{
  font-family:'Bebas Neue', sans-serif; font-size:clamp(28px, 4vw, 38px);
  color:var(--cream); margin:0 0 12px; position:relative; z-index:2;
}
.section-title--center{text-align:center;}

/* ============ LOGIN ============ */
#screenLogin{display:flex; align-items:center; justify-content:center;}
.login-card{
  position:relative; z-index:2;
  width:100%; max-width:440px;
  background:linear-gradient(180deg, rgba(28,18,16,0.92), rgba(20,13,11,0.96));
  border:1px solid var(--line); border-radius:14px;
  padding:44px 38px; text-align:center;
  box-shadow:0 30px 70px rgba(0,0,0,0.55);
}
.login-marquee{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 22px; margin-bottom:28px;
  border:1.5px solid var(--gold); border-radius:6px;
  position:relative;
}
.login-marquee::before,
.login-marquee::after{
  content:""; position:absolute; top:-9px; bottom:-9px; width:9px;
  background-image: radial-gradient(circle, var(--gold-bright) 0 2px, transparent 2.2px);
  background-size:9px 15px;
}
.login-marquee::before{left:-9px;}
.login-marquee::after{right:-9px;}
.login-marquee .brand-mark{font-size:15px;}
.login-marquee .brand-name{font-size:22px;}
.login-eyebrow{
  font-size:12px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--gold); margin-bottom:6px;
}
.login-title{
  font-family:'Bebas Neue', sans-serif; font-size:32px; color:var(--cream); margin:0 0 10px;
}
.login-sub{font-size:14.5px; color:var(--muted); margin-bottom:26px;}
.login-form{display:flex; flex-direction:column; gap:8px; text-align:left;}
.login-label{font-size:12.5px; color:var(--muted); font-weight:600;}
.login-input{
  background:#141010; border:1px solid var(--line); border-radius:6px;
  padding:13px 14px; color:var(--cream); font-size:15px; margin-bottom:6px;
  outline:none;
}
.login-input:focus{border-color:var(--gold);}
.login-error{color:#e08a8a; font-size:13px; margin:0 0 8px;}
.login-help{font-size:13px; color:var(--muted); margin-top:20px;}
.login-help a{color:var(--gold-bright); text-decoration:underline;}

/* ============ HEADER MEMBRO ============ */
.member-header{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:40px;
}
.btn-logout{
  background:transparent; border:1px solid var(--line); color:var(--muted);
  padding:9px 16px; border-radius:4px; font-size:13px; font-weight:600; cursor:pointer;
}
.btn-logout:hover{border-color:var(--gold); color:var(--gold-bright);}
.btn-back{
  background:transparent; border:none; color:var(--muted);
  font-size:14px; font-weight:600; cursor:pointer; padding:8px 0;
}
.btn-back:hover{color:var(--gold-bright);}

/* ============ SELETOR DE DISPOSITIVO ============ */
.picker-inner{
  position:relative; z-index:2; max-width:720px; margin:0 auto;
  text-align:center; min-height:calc(100vh - 200px);
  display:flex; flex-direction:column; justify-content:center;
}
.picker-sub{color:var(--muted); font-size:15px; margin-bottom:44px;}
.device-cards{
  display:flex; justify-content:center; gap:32px; flex-wrap:wrap;
}
.device-card{
  background:transparent; border:none; cursor:pointer; color:var(--ink);
  display:flex; flex-direction:column; align-items:center; gap:14px;
  width:160px; padding:6px;
}
.device-card-icon{
  width:120px; height:120px; border-radius:16px;
  background:var(--curtain); border:2px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold);
  transition:transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.device-card-icon--android{color:#8bc48a;}
.device-card:hover .device-card-icon,
.device-card:focus-visible .device-card-icon{
  transform:scale(1.06);
  border-color:var(--gold-bright);
  box-shadow:0 12px 30px rgba(0,0,0,0.5), 0 0 0 3px rgba(240,206,124,0.18);
}
.device-card-icon--android:hover,
.device-card:hover .device-card-icon--android{border-color:#8bc48a; box-shadow:0 12px 30px rgba(0,0,0,0.5), 0 0 0 3px rgba(139,196,138,0.18);}
.device-card-name{
  font-family:'Bebas Neue', sans-serif; font-size:22px; letter-spacing:0.03em; color:var(--muted);
  transition:color 0.2s ease;
}
.device-card:hover .device-card-name{color:var(--cream);}
.device-card-tag{font-size:12px; color:#7a705c;}

/* ============ TELAS DE TUTORIAL ============ */
.screen--doc{padding-bottom:80px;}
.doc-wrap{position:relative; z-index:2; max-width:720px; margin:0 auto;}
.doc-lede{color:var(--muted); font-size:15px; margin-bottom:26px; max-width:520px;}

.doc-video-wrap{margin-top:40px;}
.doc-subtitle{
  font-family:'Playfair Display', serif; font-weight:700; font-size:18px;
  color:var(--cream); margin-bottom:14px;
}
.doc-video{
  width:100%; max-width:320px; border-radius:10px;
  border:1px solid var(--line); background:#000;
  box-shadow:0 20px 40px rgba(0,0,0,0.4);
}

.doc-steps{margin-top:40px; display:flex; flex-direction:column; gap:28px;}
.doc-step{
  background:var(--curtain); border:1px solid var(--line); border-radius:10px;
  padding:22px;
}
.doc-step-head{display:flex; align-items:center; gap:14px; margin-bottom:16px;}
.doc-step-n{
  flex:none; width:30px; height:30px; border-radius:50%;
  background:linear-gradient(160deg, var(--gold-bright), var(--marquee-red));
  color:#241708; font-weight:800; font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
.doc-step-head h3{
  font-size:15.5px; font-weight:700; color:var(--cream); margin:0; line-height:1.4;
}
.doc-step img{
  border-radius:6px; border:1px solid var(--line); max-width:100%;
}

.doc-note{
  margin-top:24px; background:rgba(201,162,75,0.08); border:1px solid var(--line);
  border-radius:8px; padding:16px 18px; font-size:13.5px; color:var(--muted);
}
.doc-note strong{color:var(--gold-bright);}
.doc-note-img{margin-top:14px; border-radius:6px; border:1px solid var(--line); max-width:340px;}