/* ===== Fonte oficial do site (local, baixada do Framer) ===== */
@font-face{
  font-family:'Opening Hours Sans';
  src:url('fonts/OpeningHoursSans.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* ===== Reset ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;-webkit-text-size-adjust:100%}
body{
  font-family:'Opening Hours Sans','Plus Jakarta Sans','Inter','Arimo',-apple-system,BlinkMacSystemFont,sans-serif;
  background:#000;
  color:#fff;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* iPhone notch safe area */
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select{font-family:inherit}

/* ===== Tokens (do Framer original) ===== */
:root{
  --y:#FAF27F;          /* amarelo */
  --y2:#ffdc2b;         /* amarelo destaque */
  --g:#3AC04F;          /* verde texto */
  --g2:#00C853;         /* verde botão */
  --w:#FFFCF2;          /* branco quente */
}

/* ===== Telas ===== */
.screen{display:none;position:relative;min-height:100vh;width:100%;overflow:hidden}
.screen.active{display:block}

/* Background mobile: foto no topo (bg-mobile.webp — vertical, rosto em destaque) / Desktop: fullscreen */
.bg-img{
  position:absolute;
  top:0;left:0;right:0;
  height:58vh;
  z-index:0;
  background:#0a0a0a url('bg-mobile.webp') 60% 30% / cover no-repeat;
  pointer-events:none;  /* nunca interceptar cliques — bg é só visual */
}
.bg-img img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:60% 30%;
}

/* Overlay (mobile: gradient suave de transição foto→conteúdo) */
.overlay{
  position:absolute;
  top:48vh;left:0;right:0;
  height:14vh;
  z-index:1;
  background:linear-gradient(180deg,rgba(10,10,10,0) 0%,rgba(10,10,10,1) 100%);
  pointer-events:none;
}

/* Conteúdo: começa abaixo da foto (padding-top transparente pra foto aparecer) */
.content{
  position:relative;z-index:2;
  width:100%;max-width:480px;
  margin:0 auto;
  padding:58vh 20px 32px;
  display:flex;flex-direction:column;gap:12px;
  min-height:100vh;
  justify-content:flex-start;
  background:linear-gradient(to bottom,transparent 0,transparent 58vh,#0a0a0a 58vh,#0a0a0a 100%);
}

/* ===== Badge topo ===== */
.badge{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:8px 16px;
  border:1px solid var(--y);
  border-radius:99px;
  background:rgba(0,0,0,.4);
  width:max-content;
  max-width:100%;
  margin:0 auto;
}
.badge-item{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Arimo',sans-serif;
  font-size:11px;font-weight:700;
  color:var(--y);
  text-transform:uppercase;
  letter-spacing:.4px;
  white-space:nowrap;
}
.badge-item:nth-child(3){font-style:italic;font-weight:400}
.badge-sep{width:1px;height:14px;background:var(--y);opacity:.7}

/* ===== Headline (Opening Hours Sans, igual ao Framer original) ===== */
.headline{
  font-family:'Opening Hours Sans','Opening Hours Sans Placeholder',sans-serif;
  font-size:22px;
  font-weight:400;
  line-height:1.1em;
  letter-spacing:0;
  color:rgb(255,252,242);
  text-align:center;
  margin:4px 0;
}
.headline strong{font-weight:700}
.headline .hl{color:rgb(250,242,127);font-weight:700}

/* ===== Subhead ===== */
.subhead{
  font-family:'Plus Jakarta Sans','Arimo',sans-serif;
  font-size:14px;
  font-weight:400;
  line-height:1.45em;
  color:rgb(235,235,235);
  text-align:center;
  margin:2px 0 4px;
}
.subhead .hl{color:rgb(250,242,127);font-weight:600}

/* ===== Form (idêntico ao original) ===== */
.form{display:flex;flex-direction:column;gap:12px;align-items:center;max-width:100%;margin-top:8px}

.input-wrap{
  display:flex;align-items:center;
  width:100%;max-width:95%;
  background:#fff;
  border:1px solid #ccc;
  border-radius:8px;
  overflow:hidden;
  height:45px;
}
.input-wrap input{
  flex:1;
  height:45px;
  padding:0 10px;
  font-size:15px;
  font-family:sans-serif;
  color:#222;
  background:transparent;
  border:0;outline:0;
  border-radius:1px;
}
.input-wrap input::placeholder{color:#888;font-family:sans-serif}

.input-phone select{
  height:45px;
  width:80px;
  padding:0 4px 0 8px;
  font-size:14px;
  font-family:sans-serif;
  color:#222;
  background:#f1f1f1;
  border:0;outline:0;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 6px center;
  background-size:8px;
  padding-right:18px;
  border-radius:1px;
}

.input-wrap.invalid{border-color:#ff4757;animation:shake .3s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* ===== Botão CTA (idêntico ao original) ===== */
.btn-cta{
  display:flex;align-items:center;justify-content:center;
  width:95%;max-width:100%;
  height:50px;
  padding:12px 2px;
  font-size:17px;
  font-family:sans-serif;
  color:#fff;
  background:var(--g2);
  border:none;
  border-radius:8px;
  text-decoration:none;
  cursor:pointer;
  animation:pulse 1.5s infinite;
  touch-action:manipulation;
}
.btn-cta img{width:1.2em;height:1.2em;margin-right:5px;opacity:1;pointer-events:none}
.btn-cta:hover{background:#00e676}
.btn-cta:disabled{background:#444;animation:none;cursor:not-allowed}

@keyframes pulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.03)}
  100%{transform:scale(1)}
}

/* ===== Legal text ===== */
.legal{
  font-family:'Opening Hours Sans','Plus Jakarta Sans','Inter',sans-serif;
  font-size:13px;
  color:#fff;
  text-align:center;
  line-height:1.4;
  margin-top:4px;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}
.legal .y{color:var(--y)}
.legal .g{color:var(--g);font-weight:700}

/* ===== Quiz/Final: sem foto topo, fundo escuro com vinheta ===== */
#screen-quiz,
#screen-final{
  background:
    radial-gradient(ellipse at top,rgba(255,220,43,.08) 0%,transparent 60%),
    radial-gradient(ellipse at bottom,rgba(58,192,79,.05) 0%,transparent 60%),
    #0a0a0a;
}
#screen-quiz .bg-img,
#screen-final .bg-img,
#screen-quiz .overlay,
#screen-final .overlay{display:none}
#screen-quiz .content,
#screen-final .content{
  padding:24px 18px 40px;
  background:transparent;
  justify-content:flex-start;
  gap:20px;
}

/* ===== Header do Quiz ===== */
.progress-wrap{
  display:flex;flex-direction:column;align-items:stretch;gap:8px;
  width:100%;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  margin-bottom:8px;
}
.progress-wrap-row{
  display:flex;align-items:center;justify-content:space-between;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:12px;letter-spacing:1px;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
.progress-wrap-row strong{
  color:var(--y);font-weight:700;
}
.progress-bar{
  width:100%;height:6px;
  background:rgba(255,255,255,.08);
  border-radius:99px;overflow:hidden;
  position:relative;
}
.progress-fill{
  height:100%;width:0;
  background:linear-gradient(90deg,var(--y2) 0%,var(--y) 50%,#3ac04f 100%);
  border-radius:99px;
  transition:width .5s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 12px rgba(255,220,43,.4);
}
.progress-fill::after{
  content:'';
  position:absolute;top:0;right:0;width:30px;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  animation:shine 2s infinite;
}
@keyframes shine{0%{transform:translateX(-30px)}100%{transform:translateX(30px)}}
.progress-text{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:13px;font-weight:700;
  color:var(--y);
}

/* ===== Conteúdo da pergunta ===== */
.quiz-content{animation:slideIn .5s cubic-bezier(.4,0,.2,1)}
@keyframes slideIn{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

.q-title{
  font-family:'Opening Hours Sans','Plus Jakarta Sans','Inter',sans-serif;
  font-size:clamp(22px,6vw,30px);
  font-weight:400;
  line-height:1.25;
  color:var(--w);
  text-align:center;
  margin:8px 0 28px;
  letter-spacing:-.3px;
  padding:0 8px;
}
.q-title strong{font-weight:700}
.q-title .hl{
  color:var(--y);font-weight:700;
  display:inline;
  position:relative;
  white-space:nowrap;
}

/* ===== Opções (cards estilo iOS) ===== */
.q-options{display:flex;flex-direction:column;gap:12px}
.q-option{
  position:relative;
  display:flex;align-items:center;gap:14px;
  width:100%;
  min-height:60px;
  padding:16px 18px 16px 16px;
  font-family:'Plus Jakarta Sans','Inter',sans-serif;
  font-size:15px;
  font-weight:600;
  text-align:left;
  color:#fff;
  background:linear-gradient(135deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.02) 100%);
  border:1.5px solid rgba(255,255,255,.1);
  border-radius:14px;
  cursor:pointer;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  line-height:1.35;
}

/* Letra A B C D E à esquerda (badge) */
.q-option-letter{
  flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:14px;
  font-weight:800;
  color:var(--y);
  background:rgba(255,220,43,.1);
  border:1.5px solid rgba(255,220,43,.3);
  border-radius:8px;
  transition:all .25s ease;
}
.q-option-text{flex:1}

/* Hover (desktop) */
@media (hover:hover){
  .q-option:hover{
    border-color:rgba(255,220,43,.5);
    background:linear-gradient(135deg,rgba(255,220,43,.08) 0%,rgba(255,220,43,.03) 100%);
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,.3),0 0 0 1px rgba(255,220,43,.2);
  }
  .q-option:hover .q-option-letter{
    background:var(--y);
    color:#0a0a0a;
    border-color:var(--y);
    transform:scale(1.05);
  }
}

/* Touch / active */
.q-option:active{
  transform:scale(.98);
  background:rgba(255,220,43,.1);
}

/* Selected */
.q-option.selected{
  border-color:var(--y);
  background:linear-gradient(135deg,rgba(255,220,43,.15) 0%,rgba(255,220,43,.05) 100%);
  color:var(--y);
  box-shadow:0 0 0 2px rgba(255,220,43,.4),0 8px 20px rgba(255,220,43,.15);
  animation:pulseSelect .4s ease;
}
.q-option.selected .q-option-letter{
  background:var(--y);
  color:#0a0a0a;
  border-color:var(--y);
}
@keyframes pulseSelect{
  0%{transform:scale(1)}
  50%{transform:scale(1.02)}
  100%{transform:scale(1)}
}

/* ===== Final ===== */
.final{justify-content:center;text-align:center;align-items:center}
.check{
  width:96px;height:96px;
  background:rgba(58,192,79,.2);
  border:2px solid var(--g);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;
  animation:popIn .5s ease;
}
@keyframes popIn{
  0%{transform:scale(0);opacity:0}
  60%{transform:scale(1.15)}
  100%{transform:scale(1);opacity:1}
}
.final-title{
  font-family:'Opening Hours Sans','Plus Jakarta Sans','Inter',sans-serif;
  font-size:clamp(26px,6.5vw,36px);
  font-weight:900;
  color:var(--w);
  text-transform:uppercase;
  line-height:1.1;
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.final-title .hl{color:var(--y)}
.final-sub{
  font-size:15px;
  color:#fff;
  line-height:1.5;
  margin:14px 0 24px;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}
.final-sub .g{color:var(--g);font-weight:700}
.btn-final{max-width:380px}

/* ===== Mobile pequeno (≤380px) ===== */
@media (max-width:380px){
  .content{padding:46vh 14px 28px;gap:10px}
  .badge{padding:6px 12px;gap:8px}
  .badge-item{font-size:10px}
  .input-wrap,.btn-cta{height:46px}
  .btn-cta{font-size:15px}
  .headline{font-size:19px}
  .subhead{font-size:13px}

  /* Quiz mobile pequeno */
  #screen-quiz .content,
  #screen-final .content{padding:18px 14px 32px}
  .q-title{font-size:20px;margin-bottom:20px}
  .q-option{padding:14px 14px;font-size:14px;min-height:56px;gap:12px}
  .q-option-letter{width:28px;height:28px;font-size:13px}
}

/* ===== Mobile altura curta ===== */
@media (max-height:700px) and (max-width:1023px){
  .bg-img{height:50vh}
  .overlay{top:40vh;height:12vh}
  .content{
    padding-top:50vh;
    background:linear-gradient(to bottom,transparent 0,transparent 50vh,#0a0a0a 50vh,#0a0a0a 100%);
  }

  #screen-quiz .content,
  #screen-final .content{padding-top:16px;padding-bottom:24px}
  .q-title{margin:0 0 18px}
  .q-options{gap:10px}
  .q-option{min-height:54px;padding:12px 14px}
}

/* ===== Tablet portrait ===== */
@media (min-width:481px) and (max-width:767px){
  #screen-quiz .content,
  #screen-final .content{max-width:520px;padding:32px 24px}
  .q-title{font-size:26px}
  .q-option{padding:18px 20px;font-size:16px}
  .q-option-letter{width:36px;height:36px;font-size:15px}
}

/* ===== Tablet/Desktop ===== */
@media (min-width:768px){
  .bg-img{position:fixed;top:0;left:0;right:0;bottom:0;height:100vh;background:#0a0a0a url('bg-desktop.webp') 38% center / cover no-repeat}
  .bg-img img{object-position:center}
  .overlay{
    position:fixed;inset:0;height:100vh;top:0;
    background:linear-gradient(90deg,
      rgba(0,0,0,.9) 0%,
      rgba(0,0,0,.75) 28%,
      rgba(0,0,0,.4) 50%,
      rgba(0,0,0,0) 70%);
  }
  .content{
    max-width:1200px;
    padding:48px 60px;
    justify-content:center;
    align-items:flex-start;
    margin:0 auto;
    background:transparent;
    gap:18px;
  }
  .content > *{max-width:480px;width:100%}
  .headline{font-size:36px;text-align:left;line-height:1.1em;text-shadow:0 2px 12px rgba(0,0,0,.6)}
  .subhead{font-size:16px;text-align:left;line-height:1.5em;text-shadow:0 1px 6px rgba(0,0,0,.6);margin:6px 0 4px}
  .badge{margin:0}
  .form{align-items:flex-start}
  .legal{text-align:left;text-shadow:0 1px 4px rgba(0,0,0,.6)}
  .quiz-wrap{align-items:center}
  .quiz-wrap > *{max-width:560px}
  .final{align-items:center;text-align:center;margin:0 auto}
  .final > *{max-width:560px}
}

@media (min-width:1200px){
  .content{padding:60px 80px}
}