/* =====================================================================
   RUN RUN POWER RANGERS · css/tema.css
   Paleta dos criativos: vermelho #e8173e · azul #2f62c6 · amarelo #ffe100
   rosa #ff4fa3 · preto #161616 · verde #2bc56b · teal #4cc9c6 · lilás #8b6cf0
   Linguagem: cards brancos inclinados, contorno preto, memphis anos 90.
   ===================================================================== */
:root {
  --red: #e8173e;
  --blue: #2f62c6;
  --yellow: #ffe100;
  --pink: #ff4fa3;
  --black: #161616;
  --green: #2bc56b;
  --teal: #4cc9c6;
  --lilac: #8b6cf0;

  --bg: #ffffff;
  --bg-alt: #f4f1ea;
  --surface: #ffffff;
  --line: rgba(22, 22, 22, .14);
  --ink: #161616;
  --text: #262626;
  --text-dim: rgba(22, 22, 22, .68);
  --brand-1: var(--red);
  --brand-2: var(--blue);
  --brand-3: var(--pink);
  --brand-4: var(--yellow);
  --dark: #161616;
  --on-dark: #ffffff;
  --on-dark-dim: rgba(255, 255, 255, .7);
  --cta-bg: var(--red);
  --cta-ink: #fff;
  --cta-edge: var(--black);
  --header-bg: rgba(255, 255, 255, .95);

  --display: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dw: 400;
  --title-lh: 1;
  --title-track: .01em;
  --radius: 18px;
  --radius-sm: 12px;

  --memphis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 40c10-14 20 14 30 0s20 14 30 0' stroke='%23161616' stroke-width='5'/%3E%3Cpath d='M150 30l22 38h-44z' stroke='%23ff4fa3' stroke-width='6'/%3E%3Cpath d='M30 170l26-26M44 184l26-26' stroke='%232f62c6' stroke-width='6'/%3E%3Cpath d='M170 160c12-14 24 14 36 0' stroke='%23e8173e' stroke-width='6'/%3E%3Ccircle cx='110' cy='120' r='9' stroke='%23161616' stroke-width='5'/%3E%3C/g%3E%3Cg fill='%23161616'%3E%3Ccircle cx='200' cy='100' r='4'/%3E%3Ccircle cx='90' cy='60' r='3.5'/%3E%3Ccircle cx='120' cy='210' r='4'/%3E%3Ccircle cx='220' cy='220' r='3'/%3E%3C/g%3E%3Cpath d='M70 92h22v22H70z' fill='%23ffe100' stroke='%23161616' stroke-width='4' transform='rotate(18 81 103)'/%3E%3C/svg%3E");
  --grid: linear-gradient(rgba(22, 22, 22, .07) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(22, 22, 22, .07) 1px, transparent 1px) 0 0 / 28px 28px;
}

/* Botões: borda preta, sombra dura */
.btn { border-radius: 14px; box-shadow: inset 0 0 0 3px var(--black), 5px 6px 0 0 var(--black); font-size: 1.2rem; padding: 14px 26px; }
.btn:hover { box-shadow: inset 0 0 0 3px var(--black), 7px 9px 0 0 var(--black); transform: translate(-2px, -3px); }
.btn:active { box-shadow: inset 0 0 0 3px var(--black), 1px 2px 0 0 var(--black); transform: translate(3px, 4px); }
.btn--lg { font-size: 1.5rem; padding: 17px 34px; }
.kicker { background: var(--black); color: var(--yellow); border-radius: 8px; }
.punch { color: var(--red); }
.title { font-size: clamp(2.6rem, 6vw, 4.8rem); }

/* ---------- Header ---------- */
.hdr, .hdr.is-scrolled { background: var(--header-bg); box-shadow: 0 4px 0 0 var(--black); }
.hdr__logo img { height: 60px; }
.hdr__partner { height: 38px; }
.nav a:not(.btn)::after { background: var(--red); height: 4px; }
.burger { border-radius: 12px; }

/* ---------- Hero ---------- */
.hero { background: var(--memphis) 0 0 / 300px 300px, var(--teal); }
.hero::after { content: ''; position: absolute; inset: auto 0 0 0; height: 16px; background: linear-gradient(90deg, var(--red) 0 20%, var(--blue) 20% 40%, var(--yellow) 40% 60%, var(--pink) 60% 80%, var(--black) 80%); }
.hero__copy { background: #fff; border-radius: 22px; padding: clamp(22px, 3vw, 40px); box-shadow: 0 0 0 4px var(--black), 12px 14px 0 0 var(--black); rotate: -1.2deg; }
.hero__brand img { width: min(100%, 240px); filter: none; }
.hero { padding-top: calc(var(--header-h) + 28px); }
.hero__text { font-size: 1rem; }
.hero__text p + p { margin-top: 8px; }
.hero__title { font-size: clamp(3rem, 5.6vw, 5rem); margin-top: 10px; color: var(--black); }
.hero__title em { font-style: normal; color: var(--red); display: inline-block; rotate: -2deg; }
.pill { background: var(--black); color: #fff; border-radius: 10px; }
.pill--alt { background: var(--yellow); color: var(--black); box-shadow: inset 0 0 0 3px var(--black); }
.hero__modes span { background: var(--blue); border-radius: 8px; box-shadow: inset 0 0 0 3px var(--black); }
.hero__modes span:nth-child(3), .hero__modes span:nth-child(2) { background: var(--pink); }
.countdown__cell { border-radius: 10px; box-shadow: inset 0 0 0 3px var(--black), 4px 5px 0 0 var(--black); }
.countdown__cell b { font-size: clamp(1.8rem, 3vw, 2.5rem); }

.hero__visual { aspect-ratio: .95; }
.bolt { position: absolute; z-index: 0; width: 42%; left: 26%; top: 0; filter: drop-shadow(8px 10px 0 var(--black)); }
.bolt svg { width: 100%; height: auto; }
.hero__zord { position: absolute; z-index: 1; right: -8%; top: 4%; width: 62%; }
.hero__rangers { position: absolute; z-index: 2; left: -4%; right: -4%; bottom: 4%; width: 108%; max-width: none; filter: drop-shadow(0 0 0 #000); }
.hero__burst { position: absolute; z-index: 1; left: 2%; top: 22%; width: 40%; color: var(--yellow); }
.hero__burst svg { width: 100%; height: auto; animation: spin 30s linear infinite; }
.sticker { position: absolute; z-index: 3; display: grid; place-items: center; text-align: center; font-family: var(--display); text-transform: uppercase; line-height: .9; color: var(--black); box-shadow: 0 0 0 3px var(--black), 5px 6px 0 0 var(--black); }
.sticker--date { left: 0; top: 6%; width: 116px; aspect-ratio: 1; border-radius: 50%; background: var(--yellow); rotate: -12deg; }
.sticker--date b { display: block; font-weight: 400; font-size: 2.8rem; }
.sticker--date small { display: block; font-size: 1rem; }
.sticker--go { right: 2%; bottom: 0; padding: 10px 16px; border-radius: 12px; background: var(--pink); color: #fff; font-size: 1.6rem; rotate: 6deg; }

/* ---------- Energia Ranger (substitui a faixa) ---------- */
.energy { position: relative; z-index: 3; background: var(--black); color: #fff; border-block: 4px solid var(--black); overflow: hidden; padding: 34px var(--gutter) 30px; }
.energy::before { content: ''; position: absolute; inset: 0; background: var(--memphis) 0 0 / 300px 300px; opacity: .08; filter: invert(1); }
.energy__inner { position: relative; width: min(100%, 1120px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); grid-template-areas: "head helmets" "bar helmets"; column-gap: 40px; row-gap: 14px; align-items: center; }
.energy__head { grid-area: head; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.energy__label { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); text-transform: uppercase; font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: .02em; }
.energy__bolt { width: 22px; display: inline-block; }
.energy__bolt svg { width: 100%; height: auto; }
.energy__pct { font-family: var(--display); font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1; color: var(--yellow); font-variant-numeric: tabular-nums; min-width: 3.4ch; text-align: right; }
.energy__bar { grid-area: bar; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; height: 30px; padding: 5px; border-radius: 10px; background: #2b2b2b; box-shadow: inset 0 0 0 3px #fff; }
.energy__bar i { position: relative; border-radius: 5px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.energy__bar i::after { content: ''; position: absolute; inset: 0; background: var(--c); transform-origin: left; transform: scaleX(clamp(0, calc(var(--p) * 5 - var(--k)), 1)); }
.energy__bar i:last-child::after { background: #6b6b6b; }
.energy__helmets { grid-area: helmets; position: relative; }
.energy__helmets img { width: 100%; height: auto; }
.energy__off { filter: grayscale(1) brightness(.45); }
.energy__on { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--p) * 100%) 0 0); }
.energy__go { position: absolute; right: 2%; bottom: -6px; z-index: 2; padding: 8px 16px; border-radius: 12px; background: var(--yellow); color: var(--black); font-family: var(--display); text-transform: uppercase; font-size: clamp(1.3rem, 2.4vw, 1.9rem); box-shadow: 0 0 0 3px var(--black), 5px 6px 0 0 var(--red); rotate: -4deg; opacity: 0; scale: .4; transition: opacity .2s, scale .45s cubic-bezier(.3, 1.7, .5, 1); }
.energy.is-full .energy__go { opacity: 1; scale: 1; }
.energy.is-full .energy__pct { animation: flash .6s steps(2) 2; }
.energy.is-full .energy__bar { box-shadow: inset 0 0 0 3px var(--yellow), 0 0 26px rgba(255, 225, 0, .55); }
@keyframes flash { 50% { color: #fff; } }

/* ---------- O evento ---------- */
.evento { background: var(--grid), #fff; }
.about__visual { display: grid; place-items: center; min-height: 520px; }
.phone { position: relative; z-index: 2; width: min(300px, 70%); aspect-ratio: 9 / 16; border-radius: 30px; overflow: hidden; background: #000; box-shadow: 0 0 0 6px var(--black), 12px 14px 0 0 var(--black); rotate: 3deg; }
.phone video { width: 100%; height: 100%; object-fit: cover; }
.about__ranger { position: absolute; z-index: 3; left: -2%; bottom: -4%; width: 46%; max-width: 300px; filter: drop-shadow(6px 8px 0 rgba(0, 0, 0, .9)); }
.about__shape { position: absolute; z-index: 1; inset: 8% 6% 10% 14%; border-radius: 28px; background: var(--memphis) 0 0 / 200px 200px, var(--pink); box-shadow: 0 0 0 4px var(--black); rotate: -6deg; }
.fact { box-shadow: inset 0 0 0 3px var(--black), 4px 5px 0 0 var(--black); }

/* ---------- Modalidades ---------- */
.modalidades { background: linear-gradient(rgba(244, 241, 234, .72), rgba(244, 241, 234, .72)), var(--memphis) 0 0 / 300px 300px, var(--bg-alt); }
.mode { border-radius: 22px; background: var(--red); box-shadow: 0 0 0 4px var(--black), 12px 14px 0 0 var(--black); }
.mode--b { background: var(--blue); }
.mode__km { color: var(--yellow); -webkit-text-stroke: 3px var(--black); paint-order: stroke fill; text-shadow: 6px 6px 0 var(--black); font-size: clamp(6.5rem, 14vw, 11rem); }
.mode--b .mode__km { color: #fff; }
.mode h3 { font-size: clamp(2rem, 3.2vw, 2.8rem); }
.mode .btn { background: #fff; color: var(--black); }
.mode::before { content: ''; position: absolute; z-index: -2; inset: 0; background: var(--memphis) 0 0 / 220px 220px; opacity: .14; }
.mode__art--kick { width: 64%; max-width: 380px; right: -6%; bottom: 0; filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, .8)); }
.mode__art--pink { width: 54%; max-width: 330px; right: -2%; bottom: 0; filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, .8)); }
.mode__badge { background: var(--yellow); box-shadow: 0 0 0 3px var(--black), 4px 5px 0 0 var(--black); font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1rem; }

/* ---------- Kits ---------- */
.kits-sec { background: var(--grid), #fff; }
.kits__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; margin-bottom: clamp(36px, 5vw, 60px); }
.kits__head .sec__head { margin-bottom: 0; }
.kits__reel { width: 200px; rotate: 4deg; }
.kits__reel .reel { rotate: 0deg; translate: 0 0; }
.plan { border-radius: 22px; box-shadow: 0 0 0 4px var(--black), 12px 14px 0 0 var(--black); }
.plan .tagline { color: var(--red); }
.plan--premium { background: #fff; }
.plan--basic { background: var(--yellow); }
.plan--basic .tagline { color: var(--black); }
.plan__badge { background: var(--pink); box-shadow: 0 0 0 3px var(--black), 4px 5px 0 0 var(--black); }
.plan__swatches { display: flex; gap: 8px; margin-top: 10px; }
.plan__swatches i { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 3px var(--black); }
.plan__basic-art { position: relative; margin: 6px 0 12px; height: 200px; }
.plan__basic-art img { position: absolute; left: 50%; top: 50%; width: 100%; max-width: 420px; height: auto; translate: -50% -50%; }
.checks li::before { background: var(--black); }
.checks li::after { border-color: var(--yellow); }
.addon { background: var(--bg-alt); box-shadow: inset 0 0 0 2px var(--black); }
.plan--basic .addon { background: #fff; }

/* ---------- Escolha seu Ranger ---------- */
.ranger-sec { background: var(--memphis) 0 0 / 300px 300px, var(--stage-c, var(--red)); transition: background-color .5s var(--ease); --stage-c: var(--red); }
.ranger-sec .sec__head .title { color: #fff; -webkit-text-stroke: 3px var(--black); paint-order: stroke fill; text-shadow: 6px 6px 0 var(--black); }
.ranger-sec .lead { background: #fff; padding: 18px 22px; border-radius: 16px; box-shadow: 0 0 0 3px var(--black), 6px 7px 0 0 var(--black); color: var(--text); }
.ranger-sec .lead strong { color: var(--black); }
.ranger-sec .picker__tab { box-shadow: inset 0 0 0 3px var(--black); }
.ranger-sec .picker__tab[aria-selected="true"] { background: var(--black); color: #fff; box-shadow: inset 0 0 0 3px var(--black), 4px 5px 0 0 #fff; }
.ranger-sec .picker__dot { box-shadow: inset 0 0 0 3px var(--black); }
.ranger-sec .picker__stage { box-shadow: 0 0 0 4px var(--black), 12px 14px 0 0 var(--black); border-radius: 24px; }
.ranger-sec .picker__visual { background: var(--grid), #fff; min-height: 480px; }
.spot { position: absolute; z-index: 1; left: 3%; right: 3%; bottom: 0; }
.spot img { width: 100%; height: auto; }
.spot__base { filter: grayscale(1) contrast(.8); opacity: .22; }
.spot__color { position: absolute; inset: 0; transition: clip-path .6s var(--ease); clip-path: inset(0 0 0 0); }
[data-active="amarelo"] .spot__color { clip-path: inset(0 80% 0 0); }
[data-active="azul"] .spot__color { clip-path: inset(0 58% 0 18%); }
[data-active="vermelho"] .spot__color { clip-path: inset(0 37% 0 42%); }
[data-active="rosa"] .spot__color { clip-path: inset(0 22% 0 62%); }
[data-active="preto"] .spot__color { clip-path: inset(0 0 0 77%); }
.ranger-helmet { position: absolute; z-index: 2; top: 18px; left: 18px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 12px; background: var(--stage-c); color: #fff; font-family: var(--display); text-transform: uppercase; font-size: 1.4rem; box-shadow: 0 0 0 3px var(--black), 4px 5px 0 0 var(--black); transition: background-color .4s; }
[data-active="amarelo"] .ranger-helmet { color: var(--black); }
.ranger-sec .picker__panel .tagline { color: var(--black); }
.ranger-sec .picker__panel h3 { color: var(--stage-c); -webkit-text-stroke: 2px var(--black); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--black); font-size: clamp(2.4rem, 4vw, 3.4rem); }
.shirt { position: relative; width: 150px; aspect-ratio: 1; margin-top: 20px; }
.shirt svg { width: 100%; height: auto; filter: drop-shadow(5px 6px 0 var(--black)); }
.shirt .shirt__body { fill: var(--stage-c); transition: fill .4s; }

/* ---------- Experiências ---------- */
.experiencias { background: var(--grid), var(--bg-alt); }
.cosplay-note { margin: clamp(36px, 5vw, 56px) auto 0; max-width: 820px; display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-radius: 18px; background: var(--yellow); color: var(--black); box-shadow: 0 0 0 4px var(--black), 8px 9px 0 0 var(--black); rotate: -1deg; }
.cosplay-note img { width: 80px; flex: none; }
.cosplay-note b { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.5rem; display: block; line-height: 1; }
.mural { background: var(--bg-alt); padding-bottom: 20px; }

/* ---------- FAQ ---------- */
.duvidas { background: #fff; }
.faq__item { box-shadow: inset 0 0 0 3px var(--black); border-radius: 14px; }
.faq__item[open] { box-shadow: inset 0 0 0 3px var(--black), 6px 7px 0 0 var(--black); }
.faq__item summary { font-size: 1.3rem; }
.faq__item summary::after { background: var(--red); }
.faq__item[open] summary::after { background: var(--blue); }

/* ---------- CTA final ---------- */
.final { background: var(--memphis) 0 0 / 300px 300px, var(--red); color: #fff; padding-bottom: 0; }
.final .kicker { background: var(--yellow); color: var(--black); }
.final .title { color: #fff; -webkit-text-stroke: 3px var(--black); paint-order: stroke fill; text-shadow: 6px 6px 0 var(--black); }
.final__lines { margin-top: 18px; font-size: 1.15rem; font-weight: 700; }
.final__when { display: inline-block; padding: 8px 14px; border-radius: 10px; background: var(--black); }
.final__quote { color: var(--yellow); -webkit-text-stroke: 4px var(--black); paint-order: stroke fill; text-shadow: 8px 8px 0 var(--black); rotate: -2deg; font-size: clamp(3rem, 9vw, 7.5rem); }
.final .btn { background: #fff; color: var(--black); }
.final__helmets { position: relative; z-index: 1; width: min(860px, 96%); margin: 40px auto 0; display: block; }
.final .bolt { width: 180px; left: 4%; top: 12%; rotate: -14deg; opacity: .95; }
.final .bolt--r { left: auto; right: 4%; top: 30%; rotate: 16deg; }

/* ---------- Contato / rodapé ---------- */
.contato { background: var(--grid), #fff; }
.contact-list a { box-shadow: inset 0 0 0 3px var(--black); }
.contact-list a:hover { box-shadow: inset 0 0 0 3px var(--black), 5px 6px 0 0 var(--black); }
.contact-list__icon { box-shadow: inset 0 0 0 3px var(--black); border-radius: 10px; }
.contact__map { box-shadow: 0 0 0 4px var(--black), 10px 12px 0 0 var(--black); border-radius: 20px; }
.ftr { border-top: 16px solid; border-image: linear-gradient(90deg, var(--red) 0 20%, var(--blue) 20% 40%, var(--yellow) 40% 60%, var(--pink) 60% 80%, var(--green) 80%) 1; }
.ftr__brand .ftr__partner { height: 56px; }
.sticky__wa { box-shadow: 0 0 0 3px var(--black), 4px 5px 0 0 var(--black); }
.reel { border-radius: 22px; box-shadow: 0 0 0 4px var(--black), 10px 12px 0 0 var(--black); }

@media (max-width: 960px) {
  .energy__inner { grid-template-columns: 1fr; grid-template-areas: "head" "bar" "helmets"; }
  .energy__helmets { max-width: 520px; width: 100%; justify-self: center; margin-top: 6px; }
  .energy__go { right: 0; bottom: -10px; }
  .hero__copy { rotate: 0deg; }
  .hero__visual { max-width: 460px; }
  .kits__head { grid-template-columns: 1fr; }
  .kits__reel { width: 180px; justify-self: center; }
  .final .bolt { width: 110px; opacity: .5; }
  .ranger-sec .picker__visual { min-height: 340px; }
}
@media (max-width: 640px) {
  .hdr__logo img { height: 48px; }
  .hdr__partner { height: 30px; }
  .hero__copy { box-shadow: 0 0 0 3px var(--black), 7px 8px 0 0 var(--black); }
  .hero__brand img { width: min(100%, 230px); }
  .sticker--date { width: 88px; }
  .sticker--date b { font-size: 2.1rem; }
  .sticker--date small { font-size: .8rem; }
  .sticker--go { font-size: 1.2rem; }
  .about__visual { min-height: 440px; }
  .mode__km { font-size: 6.4rem; }
  .ranger-sec .picker__visual { min-height: 240px; }
  .ranger-helmet { font-size: 1.1rem; top: 12px; left: 12px; }
  .final .bolt { display: none; }
  .cosplay-note { flex-direction: column; align-items: flex-start; }
}