/* ============================================================
   PAPERX · QUINZENA HVAC — Design System Arte (1080x1350 / 1080x1920)
   Dark Mode + Verde Esmeralda #1CD370 · Contraste 'mão suja de graxa vs high-end'
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  --bg:#0B0B0B; --bg2:#121212; --card:#181818; --card2:#1E1E1E;
  --green:#1CD370; --green-soft:rgba(28,211,112,.12); --green-line:rgba(28,211,112,.4); --green-glow:rgba(28,211,112,.35);
  --ink:#F5F5F5; --mut:#9AA3AD; --mut2:#6E7681;
  --red:#FF5252; --amber:#FFB020; --blue:#5B8CFF;
  --paper:#EAE3D0; --paper2:#D9CFB4; --paper-ink:#3A3427;
  --anton:'Anton',sans-serif; --inter:'Inter',sans-serif; --grotesk:'Space Grotesk',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased}
html,body{background:#000}
.anton{font-family:var(--anton);text-transform:uppercase;letter-spacing:.01em;font-weight:400}
.g{color:var(--green)}
.mut{color:var(--mut)}

/* ---------- Slide base ---------- */
.slide{position:relative;width:1080px;height:1350px;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--inter)}
.story{position:relative;width:1080px;height:1920px;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--inter)}

/* ---------- Grain / noise overlay ---------- */
.grain::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E")}

/* ---------- Grease smudges (óleo/graxa) ---------- */
.grease{position:absolute;z-index:1;pointer-events:none;filter:blur(1px)}
.grease::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 32% 38%, rgba(0,0,0,.5) 0 7%, transparent 9%),
    radial-gradient(circle at 64% 58%, rgba(16,14,9,.62) 0 11%, transparent 13%),
    radial-gradient(circle at 78% 26%, rgba(8,7,5,.55) 0 5%, transparent 7%),
    radial-gradient(circle at 42% 82%, rgba(22,19,13,.5) 0 9%, transparent 11%),
    radial-gradient(circle at 88% 74%, rgba(12,10,7,.45) 0 6%, transparent 8%),
    radial-gradient(circle at 12% 64%, rgba(18,15,10,.4) 0 7%, transparent 9%);
  filter:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3C/filter%3E")}
.grease-oil{position:absolute;z-index:2;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(60,54,38,.5), rgba(8,7,5,.85) 55%, transparent 72%);
  box-shadow:0 0 40px rgba(0,0,0,.6)}

/* ---------- Papel rasgado ---------- */
.paper{position:absolute;z-index:3;background:linear-gradient(158deg,#F0E9D8 0%,#E2D8BC 55%,#CFC4A4 100%);color:var(--paper-ink);
  clip-path:polygon(0% 7%,3% 2%,8% 8%,15% 1%,23% 6%,31% 0%,39% 7%,48% 1%,56% 6%,64% 1%,72% 5%,80% 0%,88% 7%,95% 2%,100% 6%,99.5% 31%,100% 57%,98.5% 82%,100% 96%,94% 99%,84% 94%,75% 100%,65% 95%,56% 100%,47% 94%,38% 100%,29% 95%,20% 100%,12% 95%,4% 99%,1% 91%,2.5% 68%,0% 44%,2% 22%)}
.paper::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)' opacity='0.55'/%3E%3C/svg%3E");opacity:.08;mix-blend-mode:multiply}
.paper-lines::before{content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(transparent 0 46px, rgba(110,92,52,.16) 46px 47px);
  mask-image:linear-gradient(#000,#000)}
.paper-stain{position:absolute;z-index:4;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 40% 40%, rgba(96,78,44,.35), rgba(96,78,44,.12) 55%, transparent 72%)}

/* ---------- Phone mockup (prints mobile 780x1688) ---------- */
.phone{position:relative;z-index:6;border-radius:46px;background:linear-gradient(160deg,#2A2A2A,#101010 60%);
  padding:14px;box-shadow:0 40px 90px rgba(0,0,0,.7), 0 0 60px rgba(28,211,112,.12)}
.phone .scr{position:relative;border-radius:34px;overflow:hidden;background:#000;width:100%;
  background-size:cover;background-position:center top;background-repeat:no-repeat}
.phone .notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:38%;height:26px;border-radius:0 0 18px 18px;background:#0A0A0A;z-index:3}
.phone .bar{position:absolute;top:34px;left:0;right:0;height:14px;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:0 26px;color:#fff;font-size:12px;font-weight:600;opacity:.9}
.phone.light{border-color:#cfd3d8;background:linear-gradient(160deg,#E9EBEE,#B9BEC6 60%)}
.phone.light .scr{background-color:#fff}

/* ---------- App window mockup (prints desktop) ---------- */
.window{position:relative;z-index:6;border-radius:22px;overflow:hidden;background:#101010;
  box-shadow:0 40px 80px rgba(0,0,0,.65), 0 0 50px rgba(28,211,112,.1);border:1px solid #232323}
.window .winbar{display:flex;align-items:center;gap:9px;padding:13px 18px;background:#181818;border-bottom:1px solid #232323}
.window .dot{width:12px;height:12px;border-radius:50%}
.window .wintitle{margin-left:10px;font-size:15px;color:#8B939E;font-family:var(--grotesk);font-weight:500;letter-spacing:.02em}
.window .winbody{position:relative;overflow:hidden;background-size:100% 100%;background-repeat:no-repeat}

/* ---------- Browser bar ---------- */
.urlbar{position:relative;z-index:6;display:flex;align-items:center;gap:12px;border-radius:999px;background:#141414;
  border:1px solid #262626;padding:14px 24px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.urlbar .lock{width:16px;height:16px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green-glow);flex:none}
.urlbar .url{font-family:var(--grotesk);font-size:26px;color:#E8EAED;letter-spacing:.01em}
.urlbar .url b{color:var(--green);font-weight:700}

/* ---------- Chips / kickers / badges ---------- */
.chip{display:inline-flex;align-items:center;gap:10px;padding:10px 20px;border-radius:999px;border:1px solid var(--green-line);
  background:var(--green-soft);color:var(--green);font-family:var(--grotesk);font-weight:600;font-size:19px;letter-spacing:.14em;text-transform:uppercase}
.kicker{display:flex;align-items:center;gap:16px;font-family:var(--grotesk);font-weight:600;font-size:21px;letter-spacing:.22em;text-transform:uppercase;color:var(--green)}
.kicker::before{content:"";width:46px;height:3px;background:var(--green);box-shadow:0 0 12px var(--green-glow)}
.badge{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:10px;font-family:var(--grotesk);font-weight:600;font-size:17px;letter-spacing:.06em;text-transform:uppercase}
.badge .pulse{width:9px;height:9px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor;animation:blink 1.4s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
.badge-green{background:rgba(28,211,112,.14);color:var(--green);border:1px solid var(--green-line)}
.badge-red{background:rgba(255,82,82,.12);color:var(--red);border:1px solid rgba(255,82,82,.4)}
.badge-blue{background:rgba(91,140,255,.14);color:#7FA8FF;border:1px solid rgba(91,140,255,.4)}

/* ---------- CTA ---------- */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:14px;border-radius:14px;padding:24px 44px;
  background:var(--green);color:#04180C;font-family:var(--grotesk);font-weight:700;font-size:26px;letter-spacing:.01em;
  box-shadow:0 18px 50px rgba(28,211,112,.35), inset 0 -3px 0 rgba(0,0,0,.18)}
.cta .arr{font-size:30px;line-height:1}
.cta-ghost{background:transparent;color:var(--green);border:2px solid var(--green-line);box-shadow:none}
.linkbio{font-family:var(--grotesk);font-weight:600;font-size:24px;color:var(--mut);letter-spacing:.04em}

/* ---------- Logo ---------- */
.logo{display:flex;align-items:center;gap:12px}
/* Logo oficial (imagem) — altura default 300px em canvas 1080px; slides densos usam 260px inline */
.logoimg{display:block;height:300px;width:auto}
.logo .mark{width:52px;height:52px;border-radius:13px;background:var(--green);display:flex;align-items:center;justify-content:center;
  font-family:var(--anton);font-size:30px;color:#04180C;box-shadow:0 0 26px rgba(28,211,112,.45)}
.logo .word{font-family:var(--anton);font-size:34px;letter-spacing:.06em;color:var(--ink)}
.logo .word b{color:var(--green)}

/* ---------- Títulos / textos ---------- */
.h1{font-family:var(--anton);text-transform:uppercase;line-height:.98;letter-spacing:.005em}
.h2{font-family:var(--anton);text-transform:uppercase;line-height:1.02;letter-spacing:.005em}
.lead{font-size:31px;line-height:1.42;color:#D5DAE0;font-weight:400}
.small{font-size:23px;line-height:1.45;color:var(--mut)}
.bullet{display:flex;align-items:flex-start;gap:20px;padding:22px 26px;border-radius:16px;background:var(--card);border:1px solid #202020}
.bullet .b-ico{flex:none;width:46px;height:46px;border-radius:12px;background:var(--green-soft);border:1px solid var(--green-line);
  display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--green)}
.bullet .b-t{font-size:27px;font-weight:600;color:var(--ink);line-height:1.25}
.bullet .b-s{font-size:20px;color:var(--mut);line-height:1.35;margin-top:3px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:999px;border:1px solid #2A2A2A;background:#151515;
  font-family:var(--grotesk);font-weight:600;font-size:18px;color:#C9CFD6;letter-spacing:.02em}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green-glow)}

/* ---------- Planos ---------- */
.plan{position:relative;border-radius:24px;background:var(--card);border:1px solid #232323;padding:34px 36px;overflow:hidden}
.plan.hot{border-color:var(--green-line);background:linear-gradient(170deg,rgba(28,211,112,.1),#161616 55%);box-shadow:0 30px 70px rgba(28,211,112,.12)}
.plan .p-name{font-family:var(--anton);font-size:44px;letter-spacing:.03em;text-transform:uppercase}
.plan .p-price{font-family:var(--anton);font-size:88px;line-height:1;color:var(--green);text-shadow:0 0 30px rgba(28,211,112,.35)}
.plan .p-price small{font-size:34px;color:var(--mut);font-family:var(--grotesk);font-weight:600;text-shadow:none;margin-right:6px}
.plan .p-feat{font-size:23px;color:#C4CBD2;line-height:1.5;margin-top:14px}
.plan .p-feat b{color:var(--ink);font-weight:700}
.plan .p-tag{position:absolute;top:26px;right:26px;font-family:var(--grotesk);font-weight:700;font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--green);
  padding:7px 14px;border-radius:999px;background:rgba(28,211,112,.12);border:1px solid var(--green-line)}

/* ---------- Grid overlay decorativo ---------- */
.gridlines{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:72px 72px}
.radial-fade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%, rgba(28,211,112,.09), transparent 55%)}

/* ---------- Onda / waveform ---------- */
.wave{display:flex;align-items:center;gap:7px;height:90px}
.wave i{display:block;width:10px;border-radius:5px;background:linear-gradient(180deg,var(--green),rgba(28,211,112,.35));animation:wv 1s ease-in-out infinite}
@keyframes wv{0%,100%{height:16%}50%{height:96%}}

/* ---------- Divider ---------- */
.divider{height:1px;background:linear-gradient(90deg,transparent,rgba(28,211,112,.5),transparent)}

/* ---------- Sellos/carimbo ---------- */
.stamp{display:inline-flex;align-items:center;justify-content:center;border:5px solid var(--red);color:var(--red);
  font-family:var(--anton);text-transform:uppercase;letter-spacing:.08em;border-radius:14px;padding:16px 34px;
  transform:rotate(-8deg);box-shadow:inset 0 0 30px rgba(255,82,82,.15);background:rgba(255,82,82,.05)}
.stamp::before{content:"";position:absolute;inset:0;border-radius:14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23s)' opacity='0.5'/%3E%3C/svg%3E");opacity:.25}
.stamp{position:relative;overflow:hidden}