/* ===== PÁGINA DE PRODUTO — estrutura de categoria (inspirada na Apple, estilo SkyTech) ===== */
.cat{background:#fff}
.btn.sm{height:36px;padding:0 18px;font-size:14px}
.btn-white{background:#fff;color:#111}
.btn-white:hover{background:#f0f0f0}
.gray-bg{background:var(--gray)}
.cat-head{padding:70px 0 10px}
.cat-head h1{font-size:clamp(56px,9vw,112px);font-weight:700;letter-spacing:-.05em;line-height:1}
.cat-tag{display:block;font-size:14px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--c);margin-bottom:10px}
.chapters{margin-top:44px}
.chapters-in{display:flex;gap:clamp(18px,3.2vw,46px);overflow-x:auto;scrollbar-width:none;padding:6px max(22px,calc((100vw - var(--max))/2 + 22px)) 18px}
.chapters-in::-webkit-scrollbar{display:none}
.chap{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:12px;font-size:14px;font-weight:500;color:#1D1D1F;text-align:center;min-width:72px}
.chap em{font-style:normal;font-size:12px;color:var(--c);font-weight:600;margin-top:-8px}
.chap-ico{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 14%,#fff),color-mix(in srgb,var(--c) 4%,#fff));color:var(--c);border:1px solid color-mix(in srgb,var(--c) 18%,#fff);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.chap-ico svg{width:30px;height:30px}
.chap-ico.brand{background:#fff;border-color:#E5E5EA}
.chap-ico.brand img{width:62%;height:62%;object-fit:contain}
.chap-ico.hot{background:var(--c);color:#fff;border-color:var(--c)}
.chap:hover .chap-ico{transform:translateY(-4px);box-shadow:0 14px 30px -12px var(--c)}

/* destaques (carrossel) */
.hl{padding:30px 0 70px;overflow:hidden}
.hl-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 max(22px,calc((100vw - var(--max))/2 + 22px));scroll-behavior:smooth}
.hl-track::-webkit-scrollbar{display:none}
.hl-slide{flex:0 0 min(1180px,calc(100vw - 44px));scroll-snap-align:center;border-radius:32px;min-height:680px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.s-dark{background:radial-gradient(120% 80% at 50% 110%,color-mix(in srgb,var(--c) 40%,#000) 0%,#000 60%);color:#F5F5F7}
.s-light{background:var(--gray);color:var(--ink);justify-content:center}
.s-color{background:radial-gradient(90% 90% at 80% 20%,color-mix(in srgb,var(--c) 70%,#fff),var(--c) 45%,var(--c2));color:#fff;flex-direction:row;align-items:center}
.hl-text{padding:56px 60px 0;position:relative;z-index:2}
.hl-text.center{text-align:center;padding:60px}
.hl-text .p-tag{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.hl-text .p-tag img{width:28px;height:28px;object-fit:contain}
.hl-text h2{font-size:clamp(36px,5vw,64px);font-weight:700;letter-spacing:-.045em;line-height:1.04;margin-top:14px;white-space:pre-line}
.s-dark .hl-text h2{background:linear-gradient(180deg,#fff 40%,color-mix(in srgb,var(--c) 55%,#fff));-webkit-background-clip:text;background-clip:text;color:transparent}
.hl-text h2.big{font-size:clamp(44px,7vw,92px)}
.hl-text h2.big span{display:block;background:linear-gradient(90deg,var(--c),var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hl-text p{font-size:clamp(17px,1.6vw,21px);color:#A1A1A6;max-width:520px;margin-top:14px}
.kick{font-size:14px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.75}
.hl-ctas{display:flex;gap:20px;align-items:center;margin-top:26px;flex-wrap:wrap}
.hl-ctas.center{justify-content:center}
.s-dark .link-more,.s-color .link-more{color:#fff}
.hl-slide .p-stage{margin-top:auto;padding-top:40px}
.hl-slide .device{width:min(820px,92%)}
.hl-slide .phone{transform:translateY(60px)}
.hl-slide .p-stage.in .phone{transform:translateY(30px)}
.hl-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:30px 60px 0;border-top:1px solid var(--line)}
.hl-stats div{padding:30px 16px;text-align:center}
.hl-stats div+div{border-left:1px solid var(--line)}
.hl-stats b{display:block;font-size:clamp(28px,3.4vw,46px);font-weight:700;letter-spacing:-.04em;color:var(--c)}
.hl-stats span{color:var(--ink-2);font-size:15px}
.s-color .hl-text{flex:1}
.s-color .hl-text h2{color:#fff}
.hl-orbit{flex:1;position:relative;align-self:stretch;min-height:420px}
.hl-orbit .core{position:absolute;left:50%;top:50%;width:200px;margin:-100px 0 0 -100px;filter:drop-shadow(0 30px 60px rgba(0,0,0,.35));animation:float 6s ease-in-out infinite}
.hl-orbit .sat{position:absolute;width:96px;filter:drop-shadow(0 16px 30px rgba(0,0,0,.3));transition:transform .4s var(--ease)}
.hl-orbit .sat img{width:100%}
.hl-orbit .sat:hover{transform:scale(1.1)}
.hl-orbit .sat.s0{left:10%;top:12%;animation:float 7s ease-in-out infinite}
.hl-orbit .sat.s1{right:10%;top:20%;animation:float 8s ease-in-out infinite .6s}
.hl-orbit .sat.s2{left:44%;bottom:4%;animation:float 6.5s ease-in-out infinite 1s}
.hl-ctrl{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:26px}
.hl-dots{display:flex;gap:10px;align-items:center;background:#E8E8ED;border-radius:980px;padding:0 16px;height:48px}
.hl-dots button{width:8px;height:8px;border-radius:8px;background:#86868B;transition:width .4s var(--ease),background .3s}
.hl-dots button.on{width:40px;background:#1D1D1F}
.hl-play{width:48px;height:48px;border-radius:50%;background:#E8E8ED;display:grid;place-items:center;color:#1D1D1F}
.hl-play svg{width:20px;height:20px}
.hl-play .i-play{display:none}
.hl.paused .hl-play .i-play{display:block}
.hl.paused .hl-play .i-pause{display:none}

/* trilhos de cartões */
.rail-sec{padding:90px 0 70px;overflow:hidden}
.rail-sec.gray{background:var(--gray)}
.rail-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding-bottom:36px}
.rail-head h2{font-size:clamp(32px,4.4vw,56px);font-weight:700;letter-spacing:-.04em;line-height:1.05}
.rail-head .link-more{white-space:nowrap}
.rail{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth;scroll-padding:0 max(22px,calc((100vw - var(--max))/2 + 22px))}
.rail::-webkit-scrollbar{display:none}
.rail-track{display:flex;gap:20px;padding:10px max(22px,calc((100vw - var(--max))/2 + 22px)) 30px;width:max-content}
.rail-nav{display:flex;justify-content:flex-end;gap:12px}
.rail-btn{width:40px;height:40px;border-radius:50%;background:#E8E8ED;color:#1D1D1F;display:grid;place-items:center;transition:background .2s,opacity .2s}
.rail-btn:hover{background:#D2D2D7}
.rail-btn:disabled{opacity:.35;cursor:default}
.rail-btn svg{width:20px;height:20px}
.rail-sec.gray .rail-btn{background:#fff}
.plus{position:absolute;right:20px;bottom:20px;width:38px;height:38px;border-radius:50%;background:#1D1D1F;color:#fff;display:grid;place-items:center;transition:transform .3s var(--ease)}
.plus svg{width:18px;height:18px}
button:hover>.plus{transform:rotate(90deg)}

.fam-card{scroll-snap-align:start;width:340px;text-align:center;display:flex;flex-direction:column;align-items:center}
.fam-vis{width:100%;aspect-ratio:1/1.08;border-radius:28px;position:relative;overflow:hidden;display:grid;place-items:center;background:radial-gradient(90% 80% at 50% 0%,color-mix(in srgb,var(--c) 30%,#fff),#fff 75%);transition:transform .5s var(--ease)}
.fam-card:nth-child(2) .fam-vis{background:radial-gradient(90% 80% at 50% 0%,color-mix(in srgb,var(--c) 70%,#000),#0b0b0f 75%)}
.fam-card:nth-child(3) .fam-vis{background:linear-gradient(160deg,color-mix(in srgb,var(--c) 18%,#fff),color-mix(in srgb,var(--c) 45%,#fff))}
.fam-card:nth-child(4) .fam-vis{background:radial-gradient(90% 80% at 50% 100%,color-mix(in srgb,var(--c) 45%,#fff),#fff 75%)}
.fam-card:hover .fam-vis{transform:translateY(-6px)}
.fam-vis .fam-brand{width:56%;max-height:52%;object-fit:contain;filter:drop-shadow(0 24px 30px rgba(0,0,0,.18));transition:transform .7s var(--ease)}
.fam-card:nth-child(2) .fam-vis .fam-brand{filter:drop-shadow(0 0 30px rgba(255,255,255,.15))}
.fam-orb{width:46%;aspect-ratio:1;border-radius:30%;display:grid;place-items:center;background:linear-gradient(150deg,color-mix(in srgb,var(--c) 85%,#fff),var(--c2));color:#fff;box-shadow:0 30px 60px -20px var(--c),inset 0 1px 0 rgba(255,255,255,.4);transform:rotate(-6deg);transition:transform .7s var(--ease)}
.fam-orb svg{width:48%;height:48%}
.fam-card:hover .fam-brand,.fam-card:hover .fam-orb{transform:scale(1.07) rotate(-3deg)}
.fam-badge{position:absolute;right:18px;bottom:18px;width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(0,0,0,.25))}
.fam-vis.has-brand{background:radial-gradient(90% 80% at 50% 0%,#fff,#F5F5F7 80%)!important}
.fam-card:nth-child(2) .fam-vis.has-brand{background:radial-gradient(90% 80% at 50% 0%,#fff,#EEF3FF 80%)!important}
.fam-card:nth-child(3) .fam-vis.has-brand{background:radial-gradient(70% 60% at 30% 20%,#E6FEFD,transparent 70%),radial-gradient(70% 60% at 80% 90%,#FFE8EE,transparent 70%),#fff!important}

.fam-ico{position:absolute;left:20px;top:20px;width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);display:grid;place-items:center;color:var(--c)}
.fam-ico svg{width:22px;height:22px}
.fam-new{font-size:12px;font-weight:600;color:#BF4800;margin-top:22px}
.fam-card h3{font-size:26px;font-weight:600;letter-spacing:-.025em;margin-top:4px}
.fam-card .fam-sub{font-weight:600;color:var(--c);font-size:15px;margin-top:2px}
.fam-card p{color:#424245;font-size:15px;margin-top:8px;max-width:280px}
.fam-ctas{display:flex;gap:18px;align-items:center;margin-top:20px}

.know-card{scroll-snap-align:start;position:relative;width:372px;height:560px;border-radius:30px;padding:30px;text-align:left;display:flex;flex-direction:column;overflow:hidden;transition:transform .5s var(--ease)}
.know-card:hover{transform:scale(1.015)}
.k-light{background:var(--gray);color:var(--ink)}
.k-dark{background:#000;color:#F5F5F7}
.k-label{font-size:14px;font-weight:600}
.k-head{font-size:26px;font-weight:600;letter-spacing:-.025em;line-height:1.18;margin-top:8px}
.k-vis{flex:1;display:grid;place-items:center;position:relative}
.k-vis::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c) 60%,transparent),transparent 65%);opacity:.6;filter:blur(10px);transition:transform .8s var(--ease),opacity .5s}
.know-card:hover .k-vis::before{transform:scale(1.15);opacity:.9}
.k-light .k-vis::before{opacity:.35}
.k-orb{position:relative;width:150px;height:150px;border-radius:44px;display:grid;place-items:center;background:linear-gradient(150deg,color-mix(in srgb,var(--c) 85%,#fff),var(--c2));color:#fff;box-shadow:0 30px 60px -20px var(--c),inset 0 1px 0 rgba(255,255,255,.4);transform:rotate(-6deg);transition:transform .7s var(--ease)}
.know-card:hover .k-orb{transform:rotate(0) scale(1.05)}
.k-orb svg{width:70px;height:70px}
.k-dark .plus{background:#fff;color:#000}

.why-card{scroll-snap-align:start;position:relative;width:340px;height:420px;border-radius:28px;background:#fff;padding:28px;text-align:left;display:flex;flex-direction:column;box-shadow:0 2px 12px rgba(0,0,0,.04);transition:transform .5s var(--ease),box-shadow .5s}
.why-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(0,0,0,.25)}
.w-label{font-size:14px;font-weight:600}
.w-head{font-size:24px;font-weight:600;letter-spacing:-.022em;line-height:1.2;margin-top:8px}
.w-vis{flex:1;display:grid;place-items:center;color:var(--sky)}
.w-vis svg{width:110px;height:110px;stroke-width:1.2;filter:drop-shadow(0 20px 30px rgba(46,158,244,.35))}

.aud-line{margin-top:40px;padding:26px 30px;border-radius:22px;background:var(--gray);font-size:17px;color:#424245;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.aud-line>span:first-child{font-weight:700;color:var(--ink)}
.aud-line .chips{display:flex;gap:8px;flex-wrap:wrap;width:100%;margin-top:6px}
.aud-line .chips i{font-style:normal;font-size:14px;padding:7px 14px;border-radius:980px;background:#fff;border:1px solid var(--line)}

.partners{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px}
.partner{background:var(--gray);border-radius:30px;padding:50px 40px 0;text-align:center;min-height:540px;display:flex;flex-direction:column;align-items:center;overflow:hidden;position:relative}
.partner h3{font-size:32px;font-weight:700;letter-spacing:-.03em}
.partner p{color:#424245;margin-top:8px;max-width:380px}
.partner .link-more{margin-top:12px}
.partner-vis{flex:1;display:grid;place-items:center;width:100%;position:relative}
.partner-vis::before{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--c),transparent 65%);opacity:.25;filter:blur(30px)}
.partner-vis img{width:min(240px,60%);position:relative;filter:drop-shadow(0 30px 40px rgba(0,0,0,.25));transition:transform .7s var(--ease)}
.partner:hover .partner-vis img{transform:translateY(-10px) scale(1.05)}

.comp{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;background:var(--gray);border-radius:30px;padding:60px 70px;margin-top:36px;align-items:center;min-height:520px}
.comp-item{border-bottom:1px solid var(--line)}
.comp-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:22px 0;font-size:22px;font-weight:600;letter-spacing:-.02em}
.comp-item summary::-webkit-details-marker{display:none}
.comp-item summary::after{content:"";width:10px;height:10px;border-right:2px solid #6E6E73;border-bottom:2px solid #6E6E73;transform:rotate(45deg);transition:transform .3s var(--ease);margin-right:6px}
.comp-item[open] summary::after{transform:rotate(-135deg)}
.comp-item p{color:#424245;font-size:16px;line-height:1.55;padding-bottom:12px}
.comp-item .link-more{font-size:15px;padding-bottom:22px}
.comp-stage{position:relative;height:420px}
.comp-vis{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.96);transition:opacity .6s var(--ease),transform .6s var(--ease);pointer-events:none}
.comp-vis.on{opacity:1;transform:none}
.comp-vis img{width:170px;filter:drop-shadow(0 30px 40px rgba(0,0,0,.25));position:relative;z-index:1}
.comp-vis .beam{width:120px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--c),var(--c2));position:relative;overflow:hidden;margin:0 -10px}
.comp-vis .beam::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#fff,transparent);animation:beam 1.8s linear infinite}
@keyframes beam{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.comp-vis.on img.a{animation:float 6s ease-in-out infinite}
.comp-vis.on img.b{animation:float 6s ease-in-out infinite 1s}

.cat-dir{background:var(--gray);padding:70px 0 40px;border-bottom:1px solid var(--line)}
.cat-dir h2{font-size:clamp(34px,4vw,48px);font-weight:700;letter-spacing:-.04em}
.dir-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-top:34px}
.dir-grid h5{font-size:13px;font-weight:400;color:var(--ink-2);margin-bottom:14px}
.dir-grid a{display:block;font-size:15px;font-weight:600;color:#333336;margin-bottom:10px}
.dir-grid a.big{font-size:22px;letter-spacing:-.02em;margin-bottom:12px}
.dir-grid a:hover{color:var(--c);text-decoration:underline}

/* modal */
.sheet{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;visibility:hidden}
.sheet-bg{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .3s var(--ease)}
.sheet-card{position:relative;width:min(720px,100%);max-height:calc(100dvh - 40px);overflow:auto;background:#fff;border-radius:30px;padding:60px 56px 50px;opacity:0;transform:translateY(30px) scale(.97);transition:opacity .35s var(--ease),transform .45s var(--ease)}
.sheet.on{visibility:visible}
.sheet.on .sheet-bg{opacity:1}
.sheet.on .sheet-card{opacity:1;transform:none}
.sheet-close{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:50%;background:#1D1D1F;color:#fff;font-size:22px;line-height:1;display:grid;place-items:center}
.sh-ico{width:72px;height:72px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(150deg,color-mix(in srgb,var(--c) 85%,#fff),var(--c));color:#fff;margin-bottom:26px;box-shadow:0 20px 40px -16px var(--c)}
.sh-ico svg{width:36px;height:36px}
.sh-kicker{font-size:14px;font-weight:600;color:var(--c);text-transform:uppercase;letter-spacing:.14em}
.sheet-card h3{font-size:clamp(30px,4vw,44px);font-weight:700;letter-spacing:-.035em;line-height:1.08;margin-top:8px}
.sheet-card p{font-size:19px;color:#424245;margin-top:16px;line-height:1.5}
.sheet-card .btn{margin-top:30px}

@media (max-width:1068px){
  .hl-slide{min-height:600px}
  .s-color{flex-direction:column}
  .hl-orbit{min-height:300px;width:100%}
  .comp{padding:44px;grid-template-columns:1fr}
  .comp-stage{height:280px;order:-1}
}
@media (max-width:833px){
  .hl-text{padding:40px 28px 0}
  .hl-text.center{padding:40px 28px}
  .hl-stats{grid-template-columns:1fr;margin:20px 28px 30px}
  .hl-stats div+div{border-left:0;border-top:1px solid var(--line)}
  .hl-stats div{padding:18px}
  .partners{grid-template-columns:1fr}
  .partner{min-height:440px}
  .dir-grid{grid-template-columns:1fr 1fr}
  .dir-grid>div:first-child{grid-column:span 2}
  .rail-head{flex-direction:column;align-items:flex-start;gap:10px}
}
@media (max-width:560px){
  .cat-head{padding:40px 0 0}
  .hl-slide{border-radius:24px;min-height:560px;flex-basis:calc(100vw - 32px)}
  .hl-track,.rail-track,.chapters-in{padding-left:16px;padding-right:16px}
  .fam-card{width:280px}
  .know-card{width:300px;height:480px}
  .why-card{width:280px;height:380px}
  .comp{padding:30px 22px}
  .comp-vis img{width:110px}
  .comp-vis .beam{width:60px}
  .sheet{padding:0;align-items:end}
  .sheet-card{border-radius:26px 26px 0 0;padding:50px 26px 36px;max-height:92dvh}
  .hl-orbit .core{width:150px;margin:-75px 0 0 -75px}
  .hl-orbit .sat{width:70px}
}