/*
Theme Name: Zoomio
Description: Tema da Zoomio — fotógrafos e videomakers sob demanda. Use com o plugin Zoomio Core.
Version: 1.0.0
Author: neuebrand
Requires PHP: 7.4
Text Domain: zoomio
*/

:root{
  --accent:#2D46FF;
  --accent-soft:color-mix(in srgb,var(--accent) 10%,#fff);
  --ink:#121212; --ink-2:#5E5E63; --ink-3:#9A9AA0; --line:#E3E3E7;
  --page:#EEEEEF; --card:#FFFFFF; --grey:#E4E4E7;
  --r:28px; --gutter:16px; --max:1200px;
  --font:'Inter Tight',system-ui,-apple-system,'Segoe UI',sans-serif;
}
@media (min-width:768px){:root{--gutter:24px}}
@media (min-width:1100px){:root{--gutter:32px;--r:32px}}

*,*:before,*:after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;margin:0;background:var(--page);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit}
b,strong{font-weight:600}
p,li,summary{text-wrap:pretty}
h1,h2,h3,p{margin:0}
.nb{white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 14px;border-radius:99px;z-index:1000}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.wrap{width:100%;max-width:calc(var(--max) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}

/* tipografia */
.display{font-size:clamp(32px,6vw,56px);font-weight:300;letter-spacing:-.045em;line-height:1.02;text-wrap:balance}
.display.xl{font-size:clamp(40px,8.4vw,92px);line-height:.98}
.display.sm{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.035em;line-height:1.12}
.display b{font-weight:600}
.eyebrow{font-size:13px;font-weight:500;color:var(--ink-3);margin-bottom:14px}
.eyebrow.light{color:rgba(255,255,255,.7)}
.lead{font-size:clamp(16px,1.4vw,19px);color:var(--ink-2);line-height:1.5;max-width:560px;margin-top:20px}
.lead.light{color:rgba(255,255,255,.72)}
.big-num{font-size:clamp(48px,6vw,72px);font-weight:300;letter-spacing:-.06em;line-height:.95;white-space:nowrap}
.big-num small{font-size:.35em;letter-spacing:-.02em;margin-left:2px}
.note{font-size:13px;color:var(--ink-2);text-align:center;margin-top:16px}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid transparent;border-radius:99px;padding:15px 24px;font:600 15px/1.2 var(--font);text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .1s,background .2s,color .2s}
.btn:active{transform:scale(.98)}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:color-mix(in srgb,var(--accent) 88%,#000)}
.btn-dark{background:var(--ink);color:#fff}
.btn-white{background:#fff;color:var(--ink)}
.btn-line{border-color:currentColor;background:transparent}
.btn-line:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-sm{padding:10px 16px;font-size:14px}
.btn-block{width:100%}
.icon-btn{width:42px;height:42px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--ink);text-decoration:none;flex:none;font-size:18px}
.icon-btn svg{width:18px;height:18px}
.icon-btn.dark{background:var(--ink);color:#fff}
.cta-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}
@media (max-width:480px){.hero .cta-row .btn{flex:1 1 0;padding-left:12px;padding-right:12px;font-size:14px}}

/* cabeçalho */
.site-head{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--page) 88%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);transition:box-shadow .2s}
.site-head.scrolled{box-shadow:0 1px 0 var(--line)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.logo{display:flex;align-items:center;gap:8px;font-weight:600;font-size:21px;letter-spacing:-.05em;text-decoration:none;color:var(--ink)}
.logo .zm-mark{width:30px;height:19px}
.head-nav{display:none;gap:4px;background:#fff;border-radius:99px;padding:4px}
.head-nav a{text-decoration:none;font-size:14px;font-weight:500;padding:9px 16px;border-radius:99px;color:var(--ink-2)}
.head-nav a:hover{color:var(--ink);background:var(--page)}
.head-act{display:flex;align-items:center;gap:8px}
.head-link{text-decoration:none;font-size:14px;font-weight:500;padding:8px 10px}
.show-sm{display:grid}
.hide-sm{display:none}
@media (min-width:900px){
  .head-nav{display:flex}
  .show-sm{display:none}
  .hide-sm{display:inline-flex}
  .head-in{height:80px}
}

/* blocos */
.card{background:var(--card);border-radius:var(--r);padding:24px 22px;text-decoration:none;color:inherit;display:block}
.card.accent{background:var(--accent);color:#fff}
.card.ink{background:var(--ink);color:#fff}
@media (min-width:768px){.card{padding:32px}}
@media (min-width:1100px){.card{padding:40px}}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:16px}
.row-between.end{align-items:flex-end;margin-top:8px}
.row-card{display:flex;justify-content:space-between;align-items:center;gap:16px;transition:transform .2s}
.row-card:hover{transform:translateY(-2px)}
.live{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;white-space:nowrap}
.live i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}

/* hero */
.hero{display:grid;gap:8px;padding-top:8px}
.hero-main{padding-bottom:28px}
.hero-side{display:grid;gap:8px}
.circles{display:flex;margin-top:36px}
.circles i{width:clamp(64px,16vw,120px);aspect-ratio:1;border-radius:50%;margin-right:calc(clamp(64px,16vw,120px) * -.15);flex:none}
.c1{background:radial-gradient(circle at 35% 35%,#8a8a8a,#2a2a2a)}
.c2{background:var(--grey)}
.c3{background:var(--accent)}
.c4{border:1.5px solid var(--ink)}
@media (min-width:1000px){
  .hero{grid-template-columns:1.45fr 1fr;align-items:stretch}
  .hero-main{display:flex;flex-direction:column;justify-content:flex-end;min-height:620px}
  .hero-main .eyebrow{margin-top:auto}
  .hero-side{grid-template-rows:auto 1fr auto}
  .hero-side .accent{display:flex;flex-direction:column;justify-content:space-between}
}

/* seções */
.section{margin-top:clamp(64px,10vw,120px)}
.section.last{margin-bottom:clamp(48px,8vw,96px)}
.section-head{margin-bottom:clamp(20px,3vw,36px);padding:0 4px}
.grid-3{display:grid;gap:8px}
@media (min-width:768px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.step{display:flex;flex-direction:column;gap:12px}
@media (min-width:768px){.step{min-height:280px}}
.step .display{margin-top:28px}
.step-n{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;width:40px;height:40px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;margin-bottom:auto}
.step p{color:var(--ink-2);font-size:15px}
.step.accent p{color:rgba(255,255,255,.78)}
.price{display:flex;flex-direction:column;gap:14px}
.price p:not(.eyebrow):not(.big-num){color:var(--ink-2);font-size:15px;flex:1}
.price.accent p:not(.eyebrow):not(.big-num){color:rgba(255,255,255,.78)}
.price .eyebrow{margin-bottom:0}
.price .btn{margin-top:8px}

.pro-band{display:grid;gap:36px}
@media (min-width:900px){.pro-band{grid-template-columns:1.2fr 1fr;align-items:center;gap:56px}}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:0}
.checks li{padding:18px 0 18px 34px;border-bottom:1px solid rgba(255,255,255,.15);position:relative;color:rgba(255,255,255,.72);font-size:15px}
.checks li:last-child{border:0}
.checks li b{color:#fff}
.checks li:before{content:"";position:absolute;left:0;top:22px;width:18px;height:18px;border-radius:50%;background:var(--accent)}

.faq{padding-top:8px;padding-bottom:8px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border:0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font-size:clamp(17px,1.8vw,21px);font-weight:500;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";width:34px;height:34px;flex:none;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;font-weight:400;font-size:18px;transition:transform .2s}
.faq details[open] summary:after{transform:rotate(45deg);background:var(--ink);color:#fff}
.faq details p{color:var(--ink-2);padding:0 50px 22px 0;max-width:720px}

.final{display:flex;flex-direction:column;gap:28px;align-items:flex-start}
@media (min-width:900px){.final{flex-direction:row;justify-content:space-between;align-items:flex-end;padding-top:72px}.final .display{max-width:720px}}

/* rodapé */
.site-main{flex:1 0 auto}
.site-foot{background:var(--ink);color:#fff;margin-top:0;padding:48px 0 calc(32px + env(safe-area-inset-bottom))}
.foot-in{display:grid;gap:28px}
.foot-brand .logo{color:#fff}
.foot-brand p{color:rgba(255,255,255,.6);font-size:14px;margin-top:12px;max-width:320px}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px}
.foot-nav a{text-decoration:none;font-size:14px;border:1.5px solid rgba(255,255,255,.3);border-radius:99px;padding:9px 15px}
.foot-nav a:hover{border-color:#fff}
.foot-copy{font-size:13px;color:rgba(255,255,255,.45)}
@media (min-width:900px){.foot-in{grid-template-columns:1fr auto;align-items:start}.foot-copy{grid-column:1/-1}}

/* páginas comuns */
.prose-wrap{display:grid;gap:8px;max-width:calc(820px + var(--gutter)*2);padding-top:8px;padding-bottom:64px}
.prose{font-size:16px;line-height:1.65;color:var(--ink-2)}
.prose h2,.prose h3{color:var(--ink);font-weight:600;letter-spacing:-.02em;margin:1.4em 0 .5em}
.prose p{margin:0 0 1em}
.prose a{color:var(--accent)}

/* páginas do app (plugin) */
.is-app .site-main{padding:4px 8px 24px}
@media (min-width:600px){.is-app .site-main{padding:12px var(--gutter) 40px}}
.is-app .site-main{flex:1 0 auto}
.site-foot{padding:28px 0 calc(24px + env(safe-area-inset-bottom))}
.is-app .site-foot .foot-brand p,.is-app .site-foot .foot-nav{display:none}
.is-app .foot-in{gap:8px;grid-template-columns:1fr auto;align-items:center}
.is-app .foot-copy{grid-column:auto}
.app-wrap .zm{--zm-accent:var(--accent)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}