/* =========================================================================
   DORAMA PLAY — design system compartilhado (home + checkout)
   ========================================================================= */

:root{
  /* ---- identidade Seu Dorama Favorito: rosa magenta sobre ameixa escura ---- */
  --bg:        #0a0410;
  --bg-2:      #12061c;
  --card:      #1a0a28;
  --card-2:    #230e34;
  --line:      rgba(255,140,198,.14);
  --line-2:    rgba(255,140,198,.28);

  --rose:      #ff2d8f;   /* rosa principal da marca */
  --rose-2:    #d4166f;   /* rosa profundo (gradientes) */
  --rose-3:    #ff8cc6;   /* rosa claro (destaques) */
  --rose-soft: rgba(255,45,143,.14);
  --gold:      #ffc85c;   /* apenas estrelas de avaliação */
  --gold-2:    #f0a020;
  --lilac:     #c77dff;   /* plano premium */
  --lilac-2:   #9d4edd;
  --green:     #22d387;
  --violet:    #a855f7;

  --txt:       #f6f3fa;
  --txt-2:     #c3bad4;
  --mut:       #8d84a1;

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;

  --shadow:    0 24px 60px -20px rgba(0,0,0,.85);
  --shadow-red:0 18px 44px -14px rgba(255,45,143,.55);

  --wrap: 1180px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }

h1,h2,h3,h4{
  font-family:'Big Shoulders Display','Inter',sans-serif;
  font-weight:800;
  line-height:.98;
  letter-spacing:-.01em;
  margin:0;
  text-transform:uppercase;
}

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px; }

/* ---------------------------------------------------------------- utilit. */
.rose{ color:var(--rose); }
.gold{ color:var(--gold); }
.green{ color:var(--green); }
.mut{ color:var(--mut); }
.center{ text-align:center; }
.nowrap{ white-space:nowrap; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--rose-3);
  background:var(--rose-soft);
  border:1px solid rgba(255,45,143,.4);
  padding:7px 14px; border-radius:999px;
  box-shadow:0 0 24px -6px rgba(255,45,143,.5), inset 0 0 18px -10px rgba(255,45,143,.9);
}

.section-title{ font-size:clamp(32px,6vw,58px); }
.section-sub{ color:var(--txt-2); font-size:clamp(15px,2.2vw,18px); max-width:640px; margin:14px auto 0; }
.section{ padding:clamp(56px,9vw,110px) 0; position:relative; }

/* ---------------------------------------------------------------- botões  */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 30px; border-radius:999px; border:0;
  font-weight:800; font-size:16px; letter-spacing:.01em;
  transition:transform .18s var(--ease), box-shadow .25s var(--ease), filter .2s;
  text-align:center; white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0) scale(.985); }

.btn-primary{
  background:linear-gradient(135deg,#ff5ba8 0%,var(--rose) 45%,var(--rose-2) 100%);
  color:#fff; box-shadow:var(--shadow-red);
}
.btn-primary:hover{ box-shadow:0 22px 54px -12px rgba(255,45,143,.8); }

.btn-gold{
  background:linear-gradient(135deg,var(--lilac) 0%,var(--lilac-2) 100%);
  color:#fff; box-shadow:0 18px 44px -14px rgba(199,125,255,.55);
}

.btn-ghost{
  background:rgba(255,255,255,.05);
  border:1px solid var(--line-2);
  color:var(--txt);
  backdrop-filter:blur(8px);
}
.btn-ghost:hover{ background:rgba(255,255,255,.1); }

.btn-lg{ padding:19px 40px; font-size:18px; }
.btn-block{ display:flex; width:100%; }

/* ícone do Telegram dentro dos botões */
.tg-ic{ width:20px; height:20px; fill:currentColor; flex:none; }
.btn-lg .tg-ic{ width:23px; height:23px; }

/* botão "cápsula" do material: plano do Telegram num círculo rosa + texto */
.btn-tg{
  background:linear-gradient(135deg,#ff5ba8 0%,var(--rose) 50%,var(--rose-2) 100%);
  color:#fff; box-shadow:var(--shadow-red);
  padding-left:14px;
}
.btn-tg:hover{ box-shadow:0 22px 54px -12px rgba(255,45,143,.8); }
.btn-tg .tg-round{
  width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:#fff; box-shadow:0 3px 10px -2px rgba(0,0,0,.35);
}
.btn-tg .tg-round svg{ width:20px; height:20px; fill:var(--rose); margin-right:2px; }
.btn-tg .tg-tx{ display:grid; gap:1px; text-align:left; line-height:1.15; }
.btn-tg .tg-tx small{ font-size:12px; font-weight:600; opacity:.92; }

/* --------------------------------------------------------------- modal - */
.modal{
  position:fixed; inset:0; z-index:120; display:none;
  align-items:center; justify-content:center; padding:18px;
  background:rgba(4,2,8,.84); backdrop-filter:blur(6px);
}
.modal.show{ display:flex; animation:fadeIn .28s var(--ease); }
@keyframes fadeIn{ from{ opacity:0 } }
.modal-box{
  position:relative; width:min(490px,100%); max-height:92svh; overflow-y:auto;
  background:linear-gradient(180deg,var(--card-2),var(--bg-2));
  border:1px solid rgba(255,45,143,.5); border-radius:var(--r-xl);
  padding:clamp(24px,5vw,38px); text-align:center;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.95);
  animation:pop .35s var(--ease);
}
@keyframes pop{ from{ transform:scale(.9) translateY(14px); opacity:0 } }
.modal-box .x{ position:absolute; top:10px; right:14px; background:none; border:0; color:var(--mut); font-size:26px; line-height:1; }
.modal-box .em{ font-size:44px; }
.modal-box h3{ font-size:clamp(25px,5vw,36px); margin-top:10px; }
.modal-box p{ color:var(--txt-2); font-size:14.8px; margin:12px 0 0; }

.cupom{
  display:inline-block; margin:16px 0 4px; padding:11px 26px; border-radius:12px; cursor:pointer;
  border:2px dashed var(--rose-3); background:rgba(255,140,198,.12);
  font-family:'Big Shoulders Display',sans-serif; font-size:32px; font-weight:800;
  letter-spacing:.1em; color:var(--rose-3); transition:.2s var(--ease);
}
.cupom:hover{ background:rgba(255,140,198,.22); transform:scale(1.03); }

/* ------------------------------------------------ pétalas de cerejeira -- */
.petals{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:-1; }
.petals i{
  position:absolute; top:-8%; width:14px; height:14px; display:block;
  background:linear-gradient(140deg,#ffb3d9,#ff5ba8);
  border-radius:70% 30% 68% 32% / 42% 62% 38% 58%;
  opacity:.55; filter:blur(.2px);
  animation:petal linear infinite;
}
@keyframes petal{
  0%   { transform:translate3d(0,-10vh,0) rotate(0deg)   scale(.9); opacity:0; }
  10%  { opacity:.6; }
  90%  { opacity:.45; }
  100% { transform:translate3d(70px,112vh,0) rotate(520deg) scale(1.05); opacity:0; }
}
.petals i:nth-child(1) { left:4%;  animation-duration:15s; animation-delay:0s;    width:11px; height:11px; }
.petals i:nth-child(2) { left:13%; animation-duration:19s; animation-delay:-3s;   width:16px; height:16px; }
.petals i:nth-child(3) { left:22%; animation-duration:13s; animation-delay:-7s; }
.petals i:nth-child(4) { left:31%; animation-duration:21s; animation-delay:-1s;   width:9px;  height:9px; }
.petals i:nth-child(5) { left:40%; animation-duration:17s; animation-delay:-11s;  width:18px; height:18px; }
.petals i:nth-child(6) { left:49%; animation-duration:14s; animation-delay:-5s; }
.petals i:nth-child(7) { left:58%; animation-duration:23s; animation-delay:-9s;   width:12px; height:12px; }
.petals i:nth-child(8) { left:67%; animation-duration:16s; animation-delay:-2s;   width:15px; height:15px; }
.petals i:nth-child(9) { left:76%; animation-duration:20s; animation-delay:-13s; }
.petals i:nth-child(10){ left:85%; animation-duration:12s; animation-delay:-6s;   width:10px; height:10px; }
.petals i:nth-child(11){ left:92%; animation-duration:18s; animation-delay:-4s;   width:17px; height:17px; }
.petals i:nth-child(12){ left:97%; animation-duration:22s; animation-delay:-15s; }
@media (prefers-reduced-motion:reduce){ .petals{ display:none; } }

/* pulso de atenção no CTA principal */
.pulse{ animation:pulse 2.4s var(--ease) infinite; }
@keyframes pulse{
  0%,100%{ box-shadow:0 18px 44px -14px rgba(255,45,143,.55), 0 0 0 0 rgba(255,45,143,.5); }
  50%    { box-shadow:0 18px 44px -14px rgba(255,45,143,.68), 0 0 0 16px rgba(255,45,143,0); }
}

/* ---------------------------------------------------------------- cards   */
.card{
  background:linear-gradient(180deg,var(--card) 0%,var(--bg-2) 100%);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
}

/* ------------------------------------------------------------ reveal anim */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ---------------------------------------------------- barra topo urgência */
.urg-bar{
  position:relative; z-index:60;
  background:linear-gradient(90deg,#9d1160,var(--rose-2) 30%,var(--rose) 65%,#ff7bbd);
  color:#fff; text-align:center;
  font-size:13.5px; font-weight:700; letter-spacing:.01em;
  padding:9px 16px;
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
}
.urg-bar b{ font-variant-numeric:tabular-nums; }
@media(max-width:560px){ .urg-bar{ font-size:11.5px; gap:5px; padding:7px 12px; line-height:1.3; } }
/* telas estreitas: a contagem de vagas sai da barra do topo para o bloco não
   ocupar 3 linhas e empurrar o vídeo para fora da primeira dobra */
@media(max-width:430px){ .urg-bar .nowrap{ display:none; } }
.urg-dot{ width:8px; height:8px; border-radius:50%; background:#fff; animation:blink 1.1s steps(2,end) infinite; }
@keyframes blink{ 50%{ opacity:.15 } }

/* --------------------------------------------------------------- header   */
.hdr{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(16px);
  background:rgba(10,4,16,.72);
  border-bottom:1px solid transparent;
  transition:background .3s, border-color .3s;
}
.hdr.stuck{ background:rgba(10,4,16,.94); border-bottom-color:var(--line); }
.hdr-in{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:66px; }

.logo{ display:flex; align-items:center; gap:10px; font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:25px; text-transform:uppercase; letter-spacing:.02em; line-height:1; }
.logo-mark{
  width:36px; height:36px; border-radius:50%; flex:none;
  background:linear-gradient(135deg,#ff7bbd,var(--rose) 50%,var(--rose-2));
  display:grid; place-items:center; box-shadow:0 8px 22px -5px rgba(255,45,143,.85);
}
.logo-mark svg{ width:18px; height:18px; fill:#fff; }

/* "SEU DORAMA" branco + "FAVORITO" em rosa inclinado, como no material da marca */
.logo .l-a{ color:#fff; }
.logo .l-b{
  display:inline-block; transform:skewX(-9deg); margin-left:.18em;
  color:transparent; background:linear-gradient(100deg,#ff8cc6,var(--rose) 55%,#ff5ba8);
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 0 12px rgba(255,45,143,.55));
}
.logo .l-h{ color:var(--rose); font-size:.7em; margin-left:.1em; }

.nav{ display:flex; align-items:center; gap:26px; font-size:14.5px; font-weight:600; color:var(--txt-2); }
.nav a:hover{ color:#fff; }
@media(max-width:900px){ .nav{ display:none; } }
@media(max-width:420px){
  .hdr-in .btn{ padding:10px 15px; font-size:13px; }
  .logo{ font-size:22px; }
  .logo-mark{ width:30px; height:30px; }
}

/* --------------------------------------------------- selo / trust badges  */
.trust-row{ display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; justify-content:center; color:var(--mut); font-size:13px; font-weight:600; }
.trust-row span{ display:inline-flex; align-items:center; gap:7px; }
.trust-row svg{ width:15px; height:15px; fill:var(--green); flex:none; }

/* --------------------------------------------------------- popup vendas   */
.sale-pop{
  position:fixed; left:18px; bottom:18px; z-index:80;
  display:flex; align-items:center; gap:12px;
  width:min(340px,calc(100vw - 36px));
  padding:12px 14px;
  background:rgba(20,16,31,.96);
  border:1px solid var(--line-2);
  border-left:3px solid var(--green);
  border-radius:14px;
  box-shadow:0 20px 46px -14px rgba(0,0,0,.9);
  backdrop-filter:blur(12px);
  transform:translateX(-130%); opacity:0;
  transition:transform .55s var(--ease), opacity .45s;
}
.sale-pop.show{ transform:none; opacity:1; }
.sale-pop .av{
  width:42px; height:42px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-weight:800; font-size:15px; color:#fff;
  background:linear-gradient(135deg,var(--lilac),var(--rose));
}
.sale-pop .tx{ min-width:0; font-size:13px; line-height:1.42; color:var(--txt-2); }
.sale-pop .tx strong{ color:#fff; }
.sale-pop .tx .when{ display:flex; align-items:center; gap:6px; margin-top:3px; font-size:11.5px; color:var(--mut); }
.sale-pop .tx .when i{ width:6px; height:6px; border-radius:50%; background:var(--green); animation:blink 1.4s infinite; }
.sale-pop .x{ position:absolute; top:6px; right:8px; background:none; border:0; color:var(--mut); font-size:16px; line-height:1; padding:2px; }
@media(max-width:520px){ .sale-pop{ left:10px; bottom:80px; } }

/* ------------------------------------------------------- contador viewers */
.live-chip{
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 15px; border-radius:999px;
  background:rgba(34,211,135,.1); border:1px solid rgba(34,211,135,.3);
  color:#8df3c4; font-size:13px; font-weight:700;
}
.live-chip i{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(34,211,135,.6); animation:ring 1.8s infinite; }
@keyframes ring{ 70%{ box-shadow:0 0 0 9px rgba(34,211,135,0) } 100%{ box-shadow:0 0 0 0 rgba(34,211,135,0) } }

/* ---------------------------------------------------------------- footer  */
.ftr{ border-top:1px solid var(--line); padding:52px 0 100px; background:var(--bg-2); }
.ftr-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; }
@media(max-width:760px){ .ftr-grid{ grid-template-columns:1fr; gap:26px; } }
.ftr h5{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); margin:0 0 12px; font-weight:800; font-family:'Inter',sans-serif; }
.ftr ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:14px; color:var(--txt-2); }
.ftr ul a:hover{ color:#fff; }
.ftr-bottom{ margin-top:36px; padding-top:22px; border-top:1px solid var(--line); font-size:12.5px; color:var(--mut); display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; }

/* --------------------------------------------------------- barra fixa CTA */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:none; align-items:center; gap:12px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(10,7,17,.97); border-top:1px solid var(--line);
  backdrop-filter:blur(14px);
  transform:translateY(110%); transition:transform .4s var(--ease);
}
.sticky-cta.show{ transform:none; }
.sticky-cta .info{ flex:1; min-width:0; line-height:1.25; }
.sticky-cta .info b{ display:block; font-size:15px; }
.sticky-cta .info small{ color:var(--mut); font-size:11.5px; }
.sticky-cta .btn{ padding:13px 22px; font-size:15px; flex:none; }
@media(max-width:900px){ .sticky-cta{ display:flex; } }

/* ------------------------------------------------------------------- FAQ  */
.faq-item{ border:1px solid var(--line); border-radius:var(--r); background:var(--card); overflow:hidden; transition:border-color .25s, background .25s; }
.faq-item + .faq-item{ margin-top:12px; }
.faq-item.open{ border-color:rgba(255,45,143,.5); background:var(--card-2); box-shadow:0 0 30px -12px rgba(255,45,143,.6); }
.faq-q{
  width:100%; background:none; border:0; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:19px 20px; font-size:16px; font-weight:700;
}
.faq-q .ic{ flex:none; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.07); display:grid; place-items:center; font-size:17px; color:var(--rose); transition:transform .3s var(--ease); }
.faq-item.open .faq-q .ic{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.faq-a p{ margin:0; padding:0 20px 20px; color:var(--txt-2); font-size:15px; }

/* --------------------------------------------------------------- reviews  */
.rv-head{ display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; margin-bottom:34px; }
.rv-score{ font-family:'Big Shoulders Display',sans-serif; font-size:70px; font-weight:800; line-height:.85; }
.stars{ color:var(--gold); letter-spacing:3px; font-size:19px; }

.rv-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:18px; }
.rv-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:22px; display:flex; flex-direction:column; gap:11px; }
.rv-card:hover{ border-color:var(--line-2); }
.rv-top{ display:flex; align-items:center; gap:12px; }
.rv-av{ width:42px; height:42px; border-radius:50%; flex:none; display:grid; place-items:center; font-weight:800; font-size:14px; color:#fff; background:linear-gradient(135deg,var(--lilac),var(--rose)); }
.rv-name{ font-weight:700; font-size:14.5px; line-height:1.2; }
.rv-meta{ font-size:12px; color:var(--mut); }
.rv-title{ font-weight:800; font-size:16px; font-family:'Inter',sans-serif; }
.rv-text{ font-size:14.5px; color:var(--txt-2); margin:0; }
.rv-ok{ font-size:12px; color:var(--green); font-weight:700; display:inline-flex; align-items:center; gap:6px; }

/* ------------------------------------------------------- scroll invisível */
.no-sb{ scrollbar-width:none; -ms-overflow-style:none; }
.no-sb::-webkit-scrollbar{ display:none; }

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