:root{
  --bg: #1c3d3a;
  --bg-2: #234a44;
  --ink: #fbfdfc;
  --ink-dim: #9cc4c0;
  --ar: #8fa9c4;
  --agua: #6e9bb5;
  --terra: #a38055;
  --fogo: #c4744a;
  --ring-size: min(78vw, 620px);
}

*{ box-sizing: border-box; }

html,body{
  margin:0; padding:0; height:100%;
  background: radial-gradient(120% 90% at 50% -10%, var(--bg-2), var(--bg) 65%);
  color: var(--ink);
  font-family: 'Garamond', 'EB Garamond', 'Georgia', serif;
  overflow-x:hidden;
}

body{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding: 6vh 5vw 14vh;
  text-align:center;
}

.eyebrow{
  font-family:'Montserrat', sans-serif;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:.68rem;
  color: var(--ink-dim);
  margin-bottom: 1.1rem;
  opacity:.85;
}

h1{
  font-weight:500;
  font-size: clamp(1.5rem, 4.2vw, 2.4rem);
  line-height:1.25;
  max-width: 720px;
  margin: 0 0 .6rem;
  letter-spacing:.005em;
}

.subhead{
  font-family:'Montserrat', sans-serif;
  color: var(--ink-dim);
  font-size: clamp(.9rem, 1.6vw, 1.05rem);
  max-width: 480px;
  margin: 0 0 3rem;
  font-weight:400;
}

.fake-progress{
  font-family:'Montserrat', sans-serif;
  font-size:.72rem;
  letter-spacing:.06em;
  color: var(--ink-dim);
  opacity:0;
  margin-top: .9rem;
  transition: opacity .4s ease;
}

.fake-progress.show{ opacity:.75; }

/* --- o anel elemental: elemento de assinatura da página --- */
.stage{
  position:relative;
  width: var(--ring-size);
  max-width: 100%;
  aspect-ratio: 16/9;
  border-radius: 18px;
}

.stage::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius: 20px;
  padding:3px;
  background: conic-gradient(from 0deg, var(--ar), var(--agua), var(--terra), var(--fogo), var(--ar));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: spin 14s linear infinite;
  opacity:.9;
  filter: blur(.2px);
}

@keyframes spin{ to{ transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  .stage::before{ animation:none; }
}

.player-shell{
  position:absolute;
  inset:6px;
  border-radius: 14px;
  overflow:hidden;
  background:#000;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.7);
}

#player-container, #player-container iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}

/* bloqueia clique, arraste, seek, pausa e menu de contexto sobre o vídeo */
.click-blocker{
  position:absolute; inset:0;
  z-index:5;
  background:transparent;
  cursor:default;
}

.cover{
  position:absolute; inset:0;
  z-index:6;
  display:flex; align-items:center; justify-content:center;
  background:
    linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,.15)),
    center/cover no-repeat;
  cursor:pointer;
  transition: opacity .5s ease;
}

.cover.hidden{ opacity:0; pointer-events:none; }

.play-btn{
  width: clamp(56px, 9vw, 76px);
  height: clamp(56px, 9vw, 76px);
  border-radius:50%;
  background: rgba(243,237,228,.95);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  transition: transform .2s ease;
}

.cover:hover .play-btn{ transform: scale(1.06); }

.play-btn svg{ width:34%; height:34%; margin-left:4%; fill:#14100d; }

.play-label{
  position:absolute;
  bottom: 14px;
  left:0; right:0;
  font-family:'Montserrat', sans-serif;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(243,237,228,.9);
}

/* --- carrossel de depoimentos, aparece quando ela fala dos feedbacks --- */
.feedback-wrap{
  display:none;
  width: min(70vw, 340px);
  opacity:0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
}

.feedback-wrap.show{
  display:block;
  opacity:1;
  transform: translateY(0);
  margin-top: 2.4rem;
}

.feedback-frame{
  position:relative;
  width:100%;
  height: min(46vh, 360px);
  border-radius: 14px;
  overflow:hidden;
  background: rgba(0,0,0,.2);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.feedback-frame img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  transition: opacity .35s ease;
}

.feedback-pause-hint{
  position:absolute;
  left:0; right:0; bottom:10px;
  text-align:center;
  font-family:'Montserrat', sans-serif;
  font-size:.68rem;
  letter-spacing:.05em;
  color: rgba(251,253,252,.92);
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
  opacity:0;
  pointer-events:none;
  transition: opacity .3s ease;
}

.feedback-frame.paused .feedback-pause-hint{ opacity:1; }

.feedback-dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  margin-top: .8rem;
}

.feedback-dot{
  width:7px; height:7px;
  border-radius:50%;
  background: var(--ink-dim);
  opacity:.4;
  transition: opacity .3s ease, background .3s ease;
}

.feedback-dot.active{
  opacity:1;
  background: var(--fogo);
}

/* --- CTA que aparece quando o pitch começa --- */
.cta-wrap{
  display:none;
  flex-direction:column;
  align-items:center;
  gap:.6rem;
  opacity:0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
}

.cta-wrap.show{
  display:flex;
  opacity:1;
  transform: translateY(0);
  margin-top: 2.4rem;
}

.cta-btn{
  font-family:'Montserrat', sans-serif;
  font-weight:600;
  font-size: clamp(.95rem, 2vw, 1.08rem);
  color:#14100d;
  background: linear-gradient(135deg, var(--terra), var(--fogo));
  padding: 1.05rem 2.4rem;
  border-radius: 999px;
  text-decoration:none;
  box-shadow: 0 16px 40px -12px rgba(194,74,38,.55);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse{
  0%,100%{ box-shadow: 0 16px 40px -12px rgba(194,74,38,.55); }
  50%{ box-shadow: 0 16px 46px -8px rgba(194,74,38,.8); }
}

.cta-sub{
  font-family:'Montserrat', sans-serif;
  font-size:.78rem;
  color: var(--ink-dim);
  letter-spacing:.03em;
}

/* --- barra fixa no rodapé (mobile principalmente) --- */
.sticky-bar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:20;
  display:flex; align-items:center; justify-content:center;
  padding: .8rem 1rem calc(.8rem + env(safe-area-inset-bottom));
  background: linear-gradient(0deg, var(--bg) 60%, transparent);
  transform: translateY(120%);
  transition: transform .5s ease;
}

.sticky-bar.show{ transform: translateY(0); }

.sticky-bar .cta-btn{
  width:100%;
  max-width: 420px;
  text-align:center;
  padding: .95rem 1.4rem;
  font-size: .95rem;
  animation:none;
}

footer{
  margin-top: 3rem;
  font-family:'Montserrat', sans-serif;
  font-size:.7rem;
  color: rgba(202,191,174,.55);
  letter-spacing:.04em;
}