/* =========================================================
   iPhone 18 — página-conceito
   Mundo visual fixado pelo brief: apple.com/br/iphone-17-pro
   ========================================================= */

:root{
  --black:#000;
  --ink:#f5f5f7;
  --ink-dim:#86868b;
  --paper:#f5f5f7;
  --paper-ink:#1d1d1f;
  --paper-dim:#6e6e73;
  --blue:#2997ff;
  --blue-solid:#0071e3;
  --blue-solid-h:#0077ed;
  --hair:rgba(255,255,255,.14);
  --hair-dark:rgba(0,0,0,.12);
  --wrap:980px;
  --wrap-wide:1440px;
  --nav-h:44px;
  --local-h:52px;
  --ease:cubic-bezier(.28,.11,.32,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --sp:clamp(64px,9vw,120px);
  color-scheme:dark;
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + var(--local-h));
}

body{
  margin:0;
  background:var(--black);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue","Inter",system-ui,sans-serif;
  font-size:17px;
  line-height:1.47059;
  letter-spacing:-.022em;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.015em;line-height:1.05}
p{margin:0}
ul,ol,dl{margin:0;padding:0;list-style:none}

/* browser surfaces */
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:6px}
:where(.band--light) :focus-visible{outline-color:var(--blue-solid)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#0b0b0c}
::-webkit-scrollbar-thumb{background:#3a3a3d;border-radius:99px;border:3px solid #0b0b0c}
::-webkit-scrollbar-thumb:hover{background:#5a5a5f}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:#fff;color:#000;padding:12px 18px;border-radius:0 0 10px 0}
.skip:focus{left:0}

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

/* ---------------- reveal ---------------- */
.js .reveal{opacity:0;transform:translate3d(0,34px,0)}
.js .reveal.is-in{opacity:1;transform:none;transition:opacity .9s var(--ease-out),transform 1s var(--ease-out)}

/* ---------------- nav ---------------- */
.globalnav{
  position:sticky;top:0;z-index:60;height:var(--nav-h);
  background:rgba(0,0,0,.8);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
}
.globalnav__in{
  max-width:var(--wrap-wide);margin-inline:auto;padding-inline:22px;height:var(--nav-h);
  display:flex;align-items:center;gap:8px;
}
.globalnav__logo{display:flex;align-items:center;padding-inline:8px}
.globalnav__logo svg,.globalnav__icons svg{fill:#f5f5f7;opacity:.86}
.globalnav__list{display:flex;flex:1;justify-content:center;gap:clamp(14px,2.6vw,40px)}
.globalnav__list a{color:#f5f5f7;opacity:.86;font-size:12px;line-height:1;letter-spacing:-.01em}
.globalnav__list a:hover{opacity:1;text-decoration:none}
.globalnav__list [aria-current] a{opacity:1}
.globalnav__icons{display:flex;gap:16px;align-items:center}

.localnav{
  position:sticky;top:var(--nav-h);z-index:55;height:var(--local-h);
  background:rgba(22,22,23,.8);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.localnav__in{
  max-width:var(--wrap-wide);margin-inline:auto;padding-inline:22px;height:var(--local-h);
  display:flex;align-items:center;gap:20px;
}
.localnav__title{color:var(--ink);font-size:21px;font-weight:600;letter-spacing:-.02em}
.localnav__title:hover{text-decoration:none}
.localnav__list{display:flex;gap:clamp(12px,2.2vw,28px);flex:1;justify-content:flex-end;overflow-x:auto;scrollbar-width:none}
.localnav__list::-webkit-scrollbar{display:none}
.localnav__list a{color:var(--ink);opacity:.82;font-size:12px;white-space:nowrap}
.localnav__list a:hover{opacity:1;text-decoration:none}
.localnav__list a.is-active{opacity:1;color:#fff}

/* ---------------- buttons ---------------- */
.btn{display:inline-block;font-size:17px;line-height:1.176;letter-spacing:-.022em}
.btn--pill{
  background:var(--blue-solid);color:#fff;border-radius:980px;padding:8px 16px;font-size:14px;
  transition:background .2s var(--ease);
}
.btn--pill:hover{background:var(--blue-solid-h);text-decoration:none}
.btn--lg{padding:12px 26px;font-size:17px}
.link-arrow{font-size:17px;display:inline-flex;align-items:center;gap:3px}
.link-arrow::after{content:"›";font-size:1.25em;line-height:0;transform:translateY(-.02em);transition:transform .25s var(--ease)}
.link-arrow:hover{text-decoration:none}
.link-arrow:hover::after{transform:translate(3px,-.02em)}

/* ---------------- typography ---------------- */
.eyebrow{
  font-size:clamp(21px,2.4vw,28px);font-weight:600;letter-spacing:-.02em;
  color:var(--ink-dim);margin-bottom:8px;
}
.band--light .eyebrow{color:var(--paper-dim)}
.section-title{
  font-size:clamp(32px,5.2vw,56px);font-weight:600;letter-spacing:-.025em;line-height:1.07;
}
.section-title--xl{font-size:clamp(40px,7.4vw,80px);letter-spacing:-.03em;line-height:1.03}
.lede{
  font-size:clamp(19px,2.1vw,24px);line-height:1.42;letter-spacing:.009em;
  color:var(--ink-dim);max-width:64ch;margin-top:28px;
}
.band--light .lede{color:var(--paper-dim)}

/* ---------------- bands ---------------- */
.band{padding-block:var(--sp);position:relative}
.band--tight{padding-block:calc(var(--sp) * .68)}
.band--dark{background:var(--black);color:var(--ink)}
.band--light{background:var(--paper);color:var(--paper-ink)}
.band--light .section-title,.band--light h3{color:var(--paper-ink)}

/* =========================================================
   O APARELHO — desenhado, não fotografado
   ========================================================= */
.device-scene{
  --dev-shadow:0 42px 90px rgba(0,0,0,.65),0 6px 24px rgba(0,0,0,.5);
  perspective:1600px;
  display:grid;place-items:center;
  width:100%;
}
.device{
  --skin:#71212f;--skin-lt:#a4485a;--skin-dk:#360c14;--rim:#dda2ae;
  width:var(--dev-w,304px);
  aspect-ratio:304/620;
  position:relative;
  transform-style:preserve-3d;
  transform:rotateY(var(--spin,0deg)) rotateX(var(--tilt,0deg));
  will-change:transform;
}
.device--sm{--dev-w:236px}
.device--pick{--dev-w:clamp(214px,22vw,272px)}
.device[data-color="vinho"]{--skin:#71212f;--skin-lt:#a4485a;--skin-dk:#360c14;--rim:#dda2ae}
.device[data-color="cafe"]{--skin:#8d6141;--skin-lt:#c1946c;--skin-dk:#432c1a;--rim:#e6c39c}
.device[data-color="roxo"]{--skin:#6a4d94;--skin-lt:#9d81c4;--skin-dk:#2f2049;--rim:#ccb4e8}
.device[data-color="laranja"]{--skin:#d2764a;--skin-lt:#eda179;--skin-dk:#7a3a1d;--rim:#ffc7a5}
.device[data-color="vermelho"]{--skin:#a01827;--skin-lt:#cf4351;--skin-dk:#530a12;--rim:#e88b95}
.device[data-color="azul"]{--skin:#2f3550;--skin-lt:#5c6486;--skin-dk:#13162a;--rim:#98a1c4}
.device[data-color="preto"]{--skin:#2b2b2d;--skin-lt:#5a5a5e;--skin-dk:#0d0d0e;--rim:#8d8d93}
.device[data-color="branco"]{--skin:#e6e6e8;--skin-lt:#fff;--skin-dk:#a9a9ae;--rim:#fff}

.device__face{
  position:absolute;inset:0;border-radius:13.5%/6.6%;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  overflow:hidden;
}
.device__face--back{
  background:
    linear-gradient(100deg,
      var(--skin-dk) 0%, var(--rim) 2.4%, var(--skin-lt) 6%, var(--skin) 22%,
      var(--skin) 78%, var(--skin-lt) 94%, var(--rim) 97.6%, var(--skin-dk) 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.16),
    var(--dev-shadow);
}
.device__face--back::after{
  /* brilho do vidro traseiro */
  content:"";position:absolute;inset:0;
  background:linear-gradient(196deg,rgba(255,255,255,.16) 0%,transparent 34%,transparent 66%,rgba(255,255,255,.07) 100%);
  pointer-events:none;
}
.device__face--front{
  transform:rotateY(180deg);
  background:#08080a;
  box-shadow:
    inset 0 0 0 3px #1b1b1e,
    inset 0 0 0 4.5px var(--skin-lt),
    var(--dev-shadow);
  padding:5px;
}

/* plateau */
.plateau{
  position:absolute;left:0;right:0;top:0;height:25.4%;
  border-radius:13.5% 13.5% 7% 7%/16.4% 16.4% 4.2% 4.2%;
  background:
    linear-gradient(100deg,
      var(--skin-dk) 0%, var(--rim) 2.4%, var(--skin-lt) 7%, color-mix(in srgb,var(--skin) 86%,#fff) 24%,
      color-mix(in srgb,var(--skin) 88%,#fff) 76%, var(--skin-lt) 93%, var(--rim) 97.6%, var(--skin-dk) 100%);
  box-shadow:0 3px 0 rgba(0,0,0,.28),0 10px 22px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.22);
}
.lens{
  position:absolute;width:21.5%;aspect-ratio:1;border-radius:50%;
  background:
    radial-gradient(circle at 34% 28%, #5d6169 0%, #26282d 34%, #0c0d10 62%, #000 100%);
  box-shadow:
    0 0 0 3px color-mix(in srgb,var(--skin-dk) 70%,#000),
    0 0 0 5px var(--skin-lt),
    0 0 0 6px rgba(0,0,0,.45),
    inset 0 2px 5px rgba(255,255,255,.14);
}
.lens i{
  position:absolute;inset:23%;border-radius:50%;
  background:radial-gradient(circle at 62% 66%, rgba(90,150,255,.55) 0%, rgba(20,30,70,.5) 38%, rgba(0,0,0,.9) 72%);
  box-shadow:inset 0 0 6px rgba(120,180,255,.35);
}
.lens i::after{
  content:"";position:absolute;left:16%;top:12%;width:34%;height:24%;border-radius:50%;
  background:linear-gradient(140deg,rgba(255,255,255,.85),rgba(255,255,255,0));
  filter:blur(1px);
}
.lens--1{left:7.5%;top:9%}
.lens--2{left:7.5%;top:51%}
.lens--3{left:37%;top:30%}
.flash{
  position:absolute;right:13.5%;top:16%;width:11.5%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 40% 34%,#fffdf2 0%,#ffe9b8 44%,#c9a468 72%,#6d5427 100%);
  box-shadow:0 0 0 2px rgba(0,0,0,.3),0 0 14px rgba(255,228,160,.35);
}
.mic{
  position:absolute;right:19%;top:42%;width:2.6%;aspect-ratio:1;border-radius:50%;
  background:#0d0d0f;box-shadow:inset 0 1px 1px rgba(255,255,255,.2);
}
.lidar{
  position:absolute;right:11%;top:55%;width:9.4%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#3b3f47 0%,#141518 55%,#000 100%);
  box-shadow:0 0 0 2px rgba(0,0,0,.34),inset 0 1px 2px rgba(255,255,255,.14);
}

.backplate{position:absolute;left:0;right:0;top:25.4%;bottom:0;display:grid;place-items:center}
.backplate::before{
  /* recorte fosco do vidro */
  content:"";position:absolute;left:7%;right:7%;top:4%;bottom:6%;border-radius:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
.backplate__logo{width:15%;height:auto;fill:rgba(255,255,255,.42);position:relative;transform:translateY(-6%)}
.device[data-color="branco"] .backplate__logo,
.device[data-color="cafe"] .backplate__logo,
.device[data-color="laranja"] .backplate__logo{fill:rgba(255,255,255,.62)}

/* botões laterais */
.btn-side{position:absolute;background:linear-gradient(180deg,var(--skin-lt),var(--skin-dk));border-radius:2px}
.btn-power{right:-2px;top:31%;width:3px;height:12%;border-radius:0 3px 3px 0}
.btn-vol1{left:-2px;top:26%;width:3px;height:8%;border-radius:3px 0 0 3px}
.btn-vol2{left:-2px;top:36%;width:3px;height:8%;border-radius:3px 0 0 3px}
.btn-action{left:-2px;top:18%;width:3px;height:5%;border-radius:3px 0 0 3px}

/* tela */
.screen{position:absolute;inset:5px;border-radius:12%/6%;overflow:hidden;background:#000}
.screen__wall{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 22% 12%, #ff3b8e 0%, transparent 55%),
    radial-gradient(120% 90% at 82% 20%, #4d5cff 0%, transparent 58%),
    radial-gradient(140% 100% at 50% 96%, #ff8a3d 0%, transparent 62%),
    linear-gradient(170deg,#1a1350,#04030f 72%);
}
.screen__ui{
  position:absolute;left:0;right:0;top:14%;text-align:center;
  display:grid;gap:2px;color:#fff;
}
.ui-time{font-size:calc(var(--dev-w,304px) * .175);font-weight:500;letter-spacing:-.03em;line-height:1;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.ui-date{font-size:calc(var(--dev-w,304px) * .038);font-weight:500;opacity:.9;letter-spacing:.01em}
.screen__home{
  position:absolute;left:50%;bottom:2.2%;translate:-50% 0;width:34%;height:4px;border-radius:99px;
  background:rgba(255,255,255,.85);
}
.screen__glare{
  position:absolute;inset:0;
  background:linear-gradient(206deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.03) 24%,transparent 46%);
  pointer-events:none;
}

/* =========================================================
   HERO — a foto manda, o fundo é ela mesma
   ========================================================= */
.hero{
  position:relative;overflow:hidden;
  min-height:100svh;
  display:grid;
  grid-template-rows:1fr auto;
  align-items:center;
  gap:clamp(14px,2.4vh,30px);
  padding-block:clamp(16px,3vh,34px) clamp(28px,5vh,52px);
  background:#000;
}
.hero__bg{
  position:absolute;inset:-14%;width:128%;height:128%;max-width:none;
  object-fit:cover;object-position:52% 42%;
  filter:blur(72px) saturate(1.25) brightness(.34);
  z-index:0;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(58% 50% at 50% 40%,transparent 12%,rgba(0,0,0,.72) 100%),
    linear-gradient(180deg,rgba(0,0,0,.55) 0%,transparent 22%,transparent 58%,#000 100%);
}
.hero__stage{position:relative;z-index:2;display:grid;place-items:center;min-height:0;padding-inline:22px}
.hero__shot{margin:0;display:grid;justify-items:center}
.hero__shot img{
  width:100%;
  max-width:min(680px, calc((100svh - 420px) * 1.55));
  /* o fundo da foto é preto como o da página: dissolvo as bordas em vez de emoldurar */
  -webkit-mask-image:
    linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%),
    linear-gradient(180deg,transparent 0,#000 11%,#000 86%,transparent 100%);
  mask-image:
    linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%),
    linear-gradient(180deg,transparent 0,#000 11%,#000 86%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
.hero__copy{text-align:center;padding-inline:22px;position:relative;z-index:3}
.hero__title{
  font-size:clamp(48px,min(11.5vw,13.4vh),104px);font-weight:600;letter-spacing:-.035em;line-height:1;
}
.hero__tagline{
  font-size:clamp(20px,min(3vw,3.4vh),30px);font-weight:600;letter-spacing:-.02em;color:var(--ink-dim);margin-top:8px;
}
.hero__cta{display:flex;gap:26px;justify-content:center;align-items:center;margin-top:clamp(16px,2.6vh,26px);flex-wrap:wrap}
.hero__price{margin-top:clamp(14px,2vh,22px);font-size:14px;color:var(--ink-dim);letter-spacing:-.016em}
.hero__price sup a{color:var(--ink-dim);font-size:9px}
.hero__scroll{
  position:absolute;bottom:18px;left:50%;translate:-50% 0;z-index:3;
  width:22px;height:34px;border:1.5px solid rgba(255,255,255,.28);border-radius:12px;
}
.hero__scroll span{
  position:absolute;left:50%;top:7px;translate:-50% 0;width:3px;height:6px;border-radius:2px;background:rgba(255,255,255,.6);
  animation:scrollHint 1.9s var(--ease) infinite;
}
@keyframes scrollHint{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(11px)}}

/* =========================================================
   DESTAQUES
   ========================================================= */
.highlights{background:var(--black);padding-block:var(--sp)}
.highlights .section-title{margin-bottom:36px}
.hl-track{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px max(22px,calc((100vw - var(--wrap)) / 2)) 26px;
  scrollbar-width:none;
}
.hl-track::-webkit-scrollbar{display:none}
.hl-card{
  flex:0 0 clamp(230px,64vw,290px);height:clamp(400px,74vw,460px);
  scroll-snap-align:center;border-radius:26px;overflow:hidden;
  background:#16161a;display:flex;flex-direction:column;justify-content:flex-end;
  padding:24px;position:relative;
}
.hl-card p{font-size:19px;line-height:1.32;letter-spacing:-.02em;color:var(--ink);position:relative;z-index:2}
.hl-card strong{font-weight:600}
.hl-art{position:absolute;inset:0;overflow:hidden}
.hl-art--photo img{width:100%;height:100%;object-fit:cover;object-position:center 42%;opacity:.9}
.hl-card:has(.hl-art--photo)::after,
.hl-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 38%,rgba(0,0,0,.72) 88%);
  z-index:1;
}
.hl-art--unibody{
  background:
    repeating-linear-gradient(76deg,rgba(255,255,255,.045) 0 1px,transparent 1px 7px),
    linear-gradient(118deg,#8e939c 0%,#4d525b 16%,#23262c 42%,#3c4149 62%,#15171b 100%);
}
.hl-art--unibody span{
  position:absolute;left:-30%;right:-30%;height:14px;rotate:-16deg;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);
  filter:blur(5px);
}
.hl-art--unibody span:nth-child(1){top:31%}
.hl-art--unibody span:nth-child(2){top:47%;height:4px;opacity:.5;filter:blur(2px)}
.hl-art--chip{background:radial-gradient(100% 80% at 50% 30%,#243347,#07090d 70%);display:grid;place-items:center}
.die{
  width:118px;aspect-ratio:1;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(140deg,#5e6c80,#1b2430 58%,#0c1118);
  box-shadow:0 0 0 1px rgba(255,255,255,.16),0 0 46px rgba(70,130,255,.28),inset 0 1px 0 rgba(255,255,255,.3);
  margin-top:-56px;
}
.die em{font-style:normal;font-size:22px;font-weight:600;letter-spacing:-.02em;color:#cfe0ff}
.hl-art--faceid{background:radial-gradient(90% 70% at 50% 34%,#1d2440,#06070c 68%)}
.hl-art--faceid .dots{
  position:absolute;left:50%;top:30%;translate:-50% 0;width:180px;height:180px;border-radius:50%;
  background-image:radial-gradient(rgba(130,190,255,.75) 1px,transparent 1.4px);
  background-size:9px 9px;
  -webkit-mask-image:radial-gradient(circle,#000 42%,transparent 72%);
  mask-image:radial-gradient(circle,#000 42%,transparent 72%);
}
.hl-art--battery{background:linear-gradient(160deg,#123322,#050806 66%);display:grid;place-items:center}
.cell{width:70px;height:150px;border-radius:16px;border:2px solid rgba(255,255,255,.3);padding:5px;margin-top:-48px;position:relative}
.cell::before{content:"";position:absolute;left:50%;top:-9px;translate:-50% 0;width:26px;height:6px;border-radius:3px 3px 0 0;background:rgba(255,255,255,.3)}
.cell i{position:absolute;left:5px;right:5px;bottom:5px;height:78%;border-radius:11px;background:linear-gradient(180deg,#5ff29a,#1d9a55)}
.hl-art--ios{background:linear-gradient(150deg,#2a1b4d,#080611 68%);display:grid;place-items:center}
.glassy{
  width:150px;height:150px;border-radius:34px;margin-top:-50px;
  background:linear-gradient(140deg,rgba(255,255,255,.22),rgba(255,255,255,.05));
  backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(255,255,255,.14),0 24px 50px rgba(0,0,0,.5);
}

/* =========================================================
   FIGURAS
   ========================================================= */
.figure-full{margin:56px auto 0;max-width:var(--wrap);padding-inline:22px}
.figure-full img{width:100%;border-radius:22px;object-fit:cover}
.figure-full--wide{max-width:1180px}
.figure-full--bleed{max-width:1180px}
.figure-full--bleed img{border-radius:22px;background:#000}
.figure-full figcaption{
  margin-top:14px;font-size:14px;color:var(--ink-dim);letter-spacing:-.016em;text-align:center;
}
.band--light .figure-full figcaption{color:var(--paper-dim)}

/* =========================================================
   PALCO DE FOTO — a imagem nunca passa da largura nativa
   ========================================================= */
.figure-plate{
  position:relative;overflow:hidden;
  margin:56px auto 0;max-width:1180px;border-radius:28px;
  padding:clamp(30px,5vw,68px) 22px;
  display:grid;justify-items:center;
}
/* a própria foto, ampliada e desfocada, preenche a faixa que ela não alcança em resolução */
.plate-bg{
  position:absolute;inset:-12%;width:124%;height:124%;max-width:none;
  object-fit:cover;border-radius:0;box-shadow:none;z-index:0;
  filter:blur(58px) saturate(1.15);
}
.figure-plate--dark .plate-bg{filter:blur(58px) saturate(1.2) brightness(.42)}
.figure-plate--light .plate-bg{filter:blur(58px) saturate(.9) brightness(1.12)}
.figure-plate--bleed::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(62% 62% at 50% 46%,transparent 24%,rgba(0,0,0,.34) 100%);
}
.figure-plate--light.figure-plate--bleed::after{
  background:radial-gradient(62% 62% at 50% 46%,transparent 24%,rgba(255,255,255,.42) 100%);
}
.figure-plate > *:not(.plate-bg){position:relative;z-index:2}
.figure-plate img{
  width:100%;max-width:var(--native,560px);border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.28);
}
.figure-plate figcaption{
  margin-top:22px;font-size:14px;color:var(--paper-dim);text-align:center;max-width:44ch;
}
.figure-plate--light{background:linear-gradient(180deg,#fff 0%,#eaeaec 100%)}
.figure-plate--pale{background:linear-gradient(180deg,#d7d7d7 0%,#fefefe 62%,#f0f0f1 100%)}
.figure-plate--pale img{
  border-radius:0;box-shadow:none;mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
.figure-plate--dark{
  background:radial-gradient(78% 62% at 50% 34%,#241a14 0%,#0a0708 62%,#000 100%);
}
.figure-plate--dark figcaption{color:var(--ink-dim)}
.compare-art--pale{background:#fff}
.compare-art--pale img{object-fit:contain;padding:6px}

/* =========================================================
   PICKER DE CORES
   ========================================================= */
.picker{
  margin-top:80px;display:grid;gap:34px;align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  background:#fff;border-radius:28px;padding:clamp(28px,5vw,56px);
}
.picker__stage{display:grid;place-items:center}
.picker .device-scene{--dev-shadow:0 26px 44px rgba(28,20,24,.22),0 4px 12px rgba(28,20,24,.12)}
.picker .device-scene{perspective:1500px}
.picker__ctrl{display:grid;gap:18px;justify-items:start}
.picker__label{font-size:clamp(24px,3vw,34px);font-weight:600;letter-spacing:-.02em;color:var(--paper-ink)}
.swatches{display:flex;gap:14px;flex-wrap:wrap}
.swatch{
  appearance:none;border:0;background:none;padding:4px;cursor:pointer;border-radius:50%;
  transition:transform .2s var(--ease);
}
.swatch span{
  display:block;width:26px;height:26px;border-radius:50%;background:var(--sw);
  box-shadow:0 0 0 1px rgba(0,0,0,.16),inset 0 -2px 4px rgba(0,0,0,.25);
  transition:box-shadow .22s var(--ease);
}
.swatch:hover{transform:scale(1.08)}
.swatch.is-on span{box-shadow:0 0 0 1px rgba(0,0,0,.16),0 0 0 3px #fff,0 0 0 5px var(--blue-solid),inset 0 -2px 4px rgba(0,0,0,.25)}
.picker__note{font-size:14px;color:var(--paper-dim)}

/* =========================================================
   GRIDS DE ESPECIFICAÇÃO
   ========================================================= */
.spec-grid{
  margin-top:74px;display:grid;gap:44px 40px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.spec-grid h3{font-size:21px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
.spec-grid p{font-size:16px;line-height:1.45;color:var(--paper-dim);letter-spacing:-.014em}
.band--dark .spec-grid p{color:var(--ink-dim)}

.stat-row{
  margin-top:64px;display:grid;gap:40px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  border-top:1px solid var(--hair);padding-top:44px;
}
.stat-row strong{display:block;font-size:clamp(38px,5.4vw,64px);font-weight:600;letter-spacing:-.03em;line-height:1}
.stat-row span{display:block;margin-top:10px;font-size:16px;color:var(--ink-dim);max-width:26ch}
.stat-row sup a{color:var(--ink-dim);font-size:9px}

/* =========================================================
   ZOOMER
   ========================================================= */
.zoomer{margin:48px auto 0;max-width:1180px;padding-inline:22px}
.zoomer__frame{max-width:740px;margin-inline:auto}
.zoomer__frame{
  position:relative;border-radius:22px;overflow:hidden;background:#0a0a0b;
  aspect-ratio:16/9;box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.zoomer__frame img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(var(--z,1));transform-origin:52% 46%;
  transition:transform .7s var(--ease-out),filter .7s var(--ease-out);
  filter:saturate(1.04);
}
.zoomer__badge{
  position:absolute;left:20px;top:20px;z-index:2;
  background:rgba(0,0,0,.55);backdrop-filter:blur(10px);
  color:#fff;font-size:13px;font-weight:600;padding:6px 12px;border-radius:980px;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;
}
.zoomer__ctrl{margin-top:26px;max-width:520px;margin-inline:auto}
.zoomer__ticks{display:flex;justify-content:space-between;margin-top:10px;font-size:12px;color:var(--ink-dim);font-variant-numeric:tabular-nums}
.zoomer__hint{margin:20px auto 0;max-width:56ch;text-align:center;font-size:14px;color:var(--ink-dim)}

input[type="range"]{
  -webkit-appearance:none;appearance:none;width:100%;height:34px;background:transparent;cursor:pointer;
}
input[type="range"]::-webkit-slider-runnable-track{
  height:4px;border-radius:99px;background:rgba(255,255,255,.22);
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:26px;height:26px;border-radius:50%;margin-top:-11px;
  background:#f5f5f7;box-shadow:0 2px 8px rgba(0,0,0,.6);
  transition:transform .18s var(--ease);
}
input[type="range"]:active::-webkit-slider-thumb{transform:scale(1.12)}
input[type="range"]::-moz-range-track{height:4px;border-radius:99px;background:rgba(255,255,255,.22)}
input[type="range"]::-moz-range-thumb{width:26px;height:26px;border:0;border-radius:50%;background:#f5f5f7}

/* =========================================================
   LENTES / RECURSOS
   ========================================================= */
.lens-grid{
  margin-top:78px;display:grid;gap:40px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  border-top:1px solid var(--hair);padding-top:46px;
}
.lens-grid h3{font-size:24px;letter-spacing:-.02em}
.lens-spec{
  margin:8px 0 12px;font-size:14px;color:var(--blue);letter-spacing:-.01em;font-variant-numeric:tabular-nums;
}
.lens-grid p:last-child{font-size:16px;color:var(--ink-dim);line-height:1.45}

.feat-grid{
  margin-top:64px;display:grid;gap:34px 40px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.feat-grid h3{font-size:19px;margin-bottom:8px}
.feat-grid p{font-size:16px;color:var(--ink-dim);line-height:1.45}

/* =========================================================
   CHIP
   ========================================================= */
.chip-viz{margin-top:64px;display:grid;place-items:center;padding-block:34px}
.chip-die{
  position:relative;width:min(280px,66vw);aspect-ratio:1;border-radius:28px;display:grid;place-items:center;
  background:linear-gradient(140deg,#dfe4ea 0%,#9aa5b3 22%,#4c5766 58%,#232b36 100%);
  box-shadow:0 30px 70px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.7);
}
.chip-die::before{
  content:"";position:absolute;inset:14px;border-radius:16px;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.09) 0 2px,transparent 2px 9px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 2px,transparent 2px 9px),
    linear-gradient(150deg,#2b3644,#0f141b);
  box-shadow:inset 0 0 30px rgba(0,0,0,.6);
}
.chip-die span{
  position:relative;z-index:2;font-size:clamp(22px,3.4vw,32px);font-weight:600;letter-spacing:-.02em;
  color:#e8eef7;text-shadow:0 1px 12px rgba(0,0,0,.6);
}
.chip-pulse{
  position:absolute;inset:-2px;border-radius:30px;z-index:1;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(120,180,255,.9) 40deg,transparent 90deg);
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:2px;
  animation:spin 5.5s linear infinite;opacity:.9;
}
@keyframes spin{to{rotate:360deg}}

.bars{margin-top:70px;display:grid;gap:44px}
.bar-row{display:grid;gap:10px}
.bar-label{font-size:19px;font-weight:600;letter-spacing:-.02em}
.bar-label span{font-weight:400;color:var(--paper-dim);font-size:15px}
.bar{height:36px;border-radius:8px;background:rgba(0,0,0,.06);overflow:hidden}
.bar i{
  position:relative;display:flex;align-items:center;height:100%;border-radius:8px;
  width:var(--w);overflow:hidden;
}
.bar i::before{
  content:"";position:absolute;inset:0;border-radius:8px;
  background:linear-gradient(90deg,#0071e3,#41a6ff);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1.15s var(--ease-out);
}
.bar--ghost i::before{background:linear-gradient(90deg,#b9bec6,#d6dae0)}
.bar i b{
  position:relative;z-index:2;
  font-size:12px;font-weight:600;color:#fff;padding-left:12px;white-space:nowrap;letter-spacing:-.01em;
  opacity:0;transition:opacity .45s .4s var(--ease);
}
.bar--ghost i b{color:#3f454e}
.bars.is-in .bar i::before{transform:scaleX(1)}
.bars.is-in .bar i b{opacity:1}
.bars__note{font-size:13px;color:var(--paper-dim)}
.bars__note sup a{font-size:9px}

/* =========================================================
   BATERIA
   ========================================================= */
.battery-row{
  margin-top:66px;display:grid;gap:44px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.battery-row strong{
  display:block;font-size:clamp(56px,9vw,102px);font-weight:600;letter-spacing:-.045em;line-height:.94;
  font-variant-numeric:tabular-nums;
  background:none;color:var(--ink);
}
.battery-row span{display:block;margin-top:14px;font-size:17px;color:var(--ink-dim);max-width:22ch}
.battery-row sup a{color:var(--ink-dim);font-size:9px}

/* =========================================================
   iOS
   ========================================================= */
.ios-grid{margin-top:64px;display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.ios-grid h3{font-size:21px;margin-bottom:8px}
.ios-grid p{font-size:16px;color:var(--paper-dim);line-height:1.45}
.ios-art{height:210px;border-radius:20px;margin-bottom:20px;position:relative;overflow:hidden}
.ios-art--a{background:linear-gradient(160deg,#ff9d6c,#bb4e75 52%,#3c2160)}
.ios-art--b{background:linear-gradient(160deg,#8ee3f5,#3b82f6 58%,#1e3a8a)}
.ios-art--c{background:linear-gradient(160deg,#f8d57e,#f0765b 54%,#8b2d6b)}
.ios-art--d{background:linear-gradient(160deg,#c4f5d0,#3aa87a 56%,#134e3f)}
.ios-art::after{
  content:"";position:absolute;left:16px;right:16px;bottom:16px;height:56%;border-radius:14px;
  background:linear-gradient(150deg,rgba(255,255,255,.3),rgba(255,255,255,.06));
  backdrop-filter:blur(4px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}

/* =========================================================
   COMPARAR
   ========================================================= */
.compare-grid{margin-top:56px;display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.compare-card{
  background:#16161a;border-radius:26px;padding:26px;display:flex;flex-direction:column;gap:12px;
}
.compare-card--hero{background:linear-gradient(180deg,#1c1c20,#0f0f12)}
.compare-art{border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:#000}
.compare-art img{width:100%;height:100%;object-fit:cover}
.compare-card h3{font-size:26px;letter-spacing:-.024em}
.compare-cap{
  font-size:13px;letter-spacing:.02em;text-transform:uppercase;color:#6e6e73;font-weight:600;
}
.compare-price{font-size:15px;color:var(--ink-dim);letter-spacing:-.016em}
.compare-price strong{
  display:inline;font-size:clamp(21px,1.7vw,25px);font-weight:600;color:var(--ink);letter-spacing:-.028em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.compare-price sup a{color:var(--ink-dim);font-size:9px}
.compare-note{
  margin-top:34px;font-size:14px;color:var(--ink-dim);max-width:62ch;
}
.compare-list{display:grid;gap:8px;margin-top:2px;flex:1}
.compare-list li{font-size:15px;color:var(--ink-dim);line-height:1.4;padding-left:16px;position:relative}
.compare-list li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:#4a4a4f}
.compare-card .btn{align-self:flex-start}

/* =========================================================
   SPECS ACCORDION
   ========================================================= */
.acc{margin-top:44px;border-top:1px solid rgba(0,0,0,.14)}
.acc details{border-bottom:1px solid rgba(0,0,0,.14)}
.acc summary{
  list-style:none;cursor:pointer;padding:24px 40px 24px 0;position:relative;
  font-size:clamp(21px,2.6vw,28px);font-weight:600;letter-spacing:-.022em;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{
  content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--paper-dim);border-bottom:2px solid var(--paper-dim);
  translate:0 -70%;rotate:45deg;transition:rotate .3s var(--ease),translate .3s var(--ease);
}
.acc details[open] summary::after{rotate:225deg;translate:0 -20%}
.acc dl{padding:0 0 30px;display:grid;gap:0}
.acc dl > div{display:grid;grid-template-columns:minmax(150px,240px) 1fr;gap:20px;padding:14px 0;border-top:1px solid rgba(0,0,0,.08)}
.acc dt{font-weight:600;font-size:16px}
.acc dd{margin:0;font-size:16px;color:var(--paper-dim);line-height:1.45}
.acc dd sup a{font-size:9px}

/* =========================================================
   AMBIENTE
   ========================================================= */
.env-row{margin-top:52px;display:grid;gap:40px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.env-row strong{display:block;font-size:clamp(40px,6vw,72px);font-weight:600;letter-spacing:-.035em;line-height:1}
.env-row span{display:block;margin-top:10px;font-size:16px;color:var(--ink-dim);max-width:24ch}

/* =========================================================
   RODAPÉ
   ========================================================= */
.foot{background:#111113;color:#a1a1a6;font-size:12px;line-height:1.5;padding-block:44px 60px}
.foot a{color:#a1a1a6}
.foot__concept{
  padding:18px 20px;border-radius:14px;background:rgba(255,255,255,.05);
  color:#d2d2d7;max-width:none;
}
.foot__concept strong{color:#fff}
.foot__ol{counter-reset:n;margin-top:22px;display:grid;gap:7px}
.foot__ol li{counter-increment:n;padding-left:18px;position:relative}
.foot__ol li::before{content:counter(n) ".";position:absolute;left:0;font-variant-numeric:tabular-nums}
.foot__links{
  margin-top:36px;padding-top:26px;border-top:1px solid rgba(255,255,255,.12);
  display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.foot__links h3{font-size:12px;color:#f5f5f7;margin-bottom:10px;font-weight:600}
.foot__links ul{display:grid;gap:8px}
.foot__legal{margin-top:32px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12)}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:834px){
  .globalnav__list{display:none}
  .picker{grid-template-columns:1fr;text-align:center;justify-items:center}
  .picker__ctrl{justify-items:center}
  .acc dl > div{grid-template-columns:1fr;gap:4px}
}
@media (max-width:640px){
  :root{--sp:clamp(56px,13vw,84px)}
  .localnav__list{display:none}
  .localnav__in{justify-content:space-between}
  body{font-size:16px}
  .device{--dev-w:242px}
  .device--sm{--dev-w:200px}
  .device--pick{--dev-w:198px}
  .hero__shot img{max-width:min(560px, calc((100svh - 352px) * 1.55))}
  .hero{min-height:auto;padding-block:26px 44px;gap:26px}
  .hero__stage{padding-top:0}
  .hero__scroll{display:none}
  .figure-full img{border-radius:16px}
  .stat-row,.lens-grid{padding-top:32px;margin-top:44px}
  .battery-row{gap:34px}
  .compare-card{padding:20px}
}

/* =========================================================
   MOVIMENTO REDUZIDO
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .js .reveal{opacity:1 !important;transform:none !important}
  .device{transform:none !important}
  .bar i::before{transform:none !important}
  .bar i b{opacity:1 !important}
}

/* =========================================================
   TELA — o aparelho de frente
   ========================================================= */
.tela-stage{position:relative;margin-top:56px;display:grid;justify-items:center;padding-inline:22px;overflow:hidden}
.tela-halo{
  position:absolute;top:-6%;width:min(760px,100%);aspect-ratio:1.4;
  background:radial-gradient(circle,rgba(70,90,200,.28) 0%,rgba(40,30,90,.12) 42%,transparent 70%);
  filter:blur(6px);pointer-events:none;
}
.device--lg{--dev-w:min(348px,72vw)}
.device--flat .device__face--front{transform:none}
.device--flat{transform:none}
.screen__wall--night{
  background:
    radial-gradient(120% 70% at 20% 8%, #5b6bff 0%, transparent 52%),
    radial-gradient(120% 80% at 86% 26%, #b93bff 0%, transparent 55%),
    radial-gradient(150% 90% at 50% 100%, #ff6a3d 0%, transparent 58%),
    linear-gradient(168deg,#0f1240,#03030c 74%);
}
.screen__notice{
  position:absolute;left:7%;right:7%;bottom:12%;
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:16px;
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
  color:#fff;font-size:calc(var(--dev-w,304px) * .036);letter-spacing:-.01em;
}
.screen__dot{width:7px;height:7px;border-radius:50%;background:#5ff29a;flex:none;box-shadow:0 0 8px rgba(95,242,154,.8)}
.tela-cap{
  margin-top:34px;max-width:52ch;text-align:center;font-size:16px;color:var(--ink-dim);
}

/* =========================================================
   PRÉ-LISTA — painel de oferta dentro da faixa de preço
   ========================================================= */
.prelist{
  margin-top:64px;background:#fff;border-radius:28px;color:var(--paper-ink);
  padding:clamp(30px,4.4vw,56px);
  display:grid;gap:clamp(26px,3.4vw,48px);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
}
.prelist__title{font-size:clamp(28px,3.6vw,42px);font-weight:600;letter-spacing:-.028em;line-height:1.06}
.prelist__lede{margin-top:16px;font-size:17px;line-height:1.45;color:var(--paper-dim);max-width:38ch}
.prelist__offer{display:grid;gap:18px;justify-items:start}
.prelist__amount{display:grid;gap:2px}
.prelist__amount span{font-size:14px;color:var(--paper-dim);letter-spacing:-.014em}
.prelist__amount strong{
  font-size:clamp(38px,4.6vw,54px);font-weight:600;letter-spacing:-.038em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.prelist__points{display:grid;gap:9px}
.prelist__points li{
  font-size:15px;line-height:1.42;color:var(--paper-dim);padding-left:24px;position:relative;
}
.prelist__points li::before{
  content:"";position:absolute;left:0;top:.28em;width:15px;height:15px;border-radius:50%;
  background:var(--blue-solid);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.4 11.6 3.2 8.4l1.1-1.1 2.1 2.1 5.3-5.3 1.1 1.1z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.4 11.6 3.2 8.4l1.1-1.1 2.1 2.1 5.3-5.3 1.1 1.1z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
}
.prelist__cta{margin-top:4px}
.prelist__demo{
  font-size:12px;line-height:1.5;color:#8a6d1f;background:#fff8e1;
  border-radius:12px;padding:12px 14px;max-width:46ch;
}
.prelist__demo strong{color:#6b520f}
.prelist__demo code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;background:rgba(0,0,0,.06);padding:1px 5px;border-radius:5px}
.hero__price strong{font-weight:600;color:var(--ink)}
@media (max-width:834px){
  .prelist{grid-template-columns:1fr;gap:26px}
}