*{box-sizing:border-box}
:root{color-scheme:light;--ink:#101820;--muted:#515c67;--paper:#f6f7f9;--yellow:#ffe600;--line:#dce0e4;--white:#fff;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
body{margin:0;color:var(--ink);background:var(--paper);line-height:1.55}
a{color:inherit;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid #1d66dc;outline-offset:3px}
header,footer{background:var(--ink);color:white}
.wrap{width:min(1160px,calc(100% - 2rem));margin-inline:auto}
.nav,nav,.section-head,.toolbar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.nav,.section-head{justify-content:space-between}
.nav{padding-block:1rem}
nav a,.logo{text-decoration:none}
.logo{font-weight:950;letter-spacing:-.05em;font-size:1.45rem;white-space:nowrap}
.logo img{display:block;max-width:100%;height:auto}
nav a{font-size:.9rem;color:#e4e8ec}
main{padding-block:1.5rem 4rem;min-height:65vh}
footer{padding:2rem 0}footer p{margin:.4rem 0;color:#e1e5e8;font-size:.88rem}
.banner{text-align:center;background:#fff4a0;padding:.45rem 1rem;font-size:.85rem;font-weight:650}
.skip{position:absolute;top:-100px;background:white;padding:.6rem;z-index:2}.skip:focus{top:.4rem}
.hero{display:grid;gap:1rem;align-items:center;background:var(--ink);color:white;border-radius:1.5rem;padding:clamp(1.45rem,6vw,4.5rem);margin-bottom:2.75rem;overflow:hidden}
.hero h1{max-width:16ch}.hero p{color:#d6dce0;max-width:48ch;margin-bottom:1.5rem}
h1,h2,h3,p{overflow-wrap:anywhere}
h1,h2,h3{line-height:1.08;margin:.4em 0;letter-spacing:-.035em}
h1{font-size:clamp(2.1rem,5.5vw,4rem)}h2{font-size:clamp(1.4rem,3vw,2rem)}h3{font-size:1.2rem}
.eyebrow{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.13em;font-weight:800}
.accent{color:var(--yellow)}
.hero-art{display:none}
.device{width:96px;height:152px;position:relative;border-radius:21px;transform:rotate(-13deg);border:2px solid #5c6370;background:linear-gradient(130deg,#727987,#292f39 65%,#15191f);box-shadow:8px 13px 21px #10182045,inset 0 0 0 3px #404754}
.device span,.device i,.device b{position:absolute;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 38% 36%,#58768a,#141b28 55%,#03050a 66%);border:2px solid #9ba0a9}
.device span{top:14px;left:12px}.device i{top:35px;left:12px}.device b{top:24px;left:32px}
.hero-art .device{transform:rotate(19deg) scale(1.6);box-shadow:8px 13px 24px #000a,0 0 75px #ffe60050}
.button,button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--yellow);color:var(--ink);border:1px solid transparent;border-radius:.75rem;min-height:44px;padding:.55rem 1rem;font:inherit;font-weight:750;text-decoration:none;cursor:pointer}
.outline{background:white;border-color:#c6cbd0}
.filters,.stack{display:grid;gap:.85rem;align-items:end}
.filters{padding:1rem;background:white;border:1px solid var(--line);border-radius:1rem}
.stack{max-width:45rem}.stack button{justify-self:start}
label{display:grid;gap:.28rem;font-size:.83rem;font-weight:700}
input,select,textarea{min-width:0;width:100%;font:inherit;color:var(--ink);border:1px solid #aeb6be;background:white;border-radius:.5rem;min-height:42px;padding:.45rem .65rem}
textarea{min-height:5rem}.check{display:flex;align-items:center;gap:.5rem}.check input{width:1rem;min-height:1rem;flex:none}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:1rem}
.card,.panel,.empty{border:1px solid var(--line);background:white;border-radius:1rem}
.card{overflow:hidden;display:flex;flex-direction:column}.card-body,.panel,.empty{padding:clamp(1rem,2.7vw,1.75rem)}
.card-body{flex:1;display:flex;flex-direction:column;align-items:flex-start}.card .button{margin-top:auto;width:100%;justify-content:space-between}
.art{background:radial-gradient(ellipse at 50% 42%,#fff,#dfe4eb);display:grid;place-items:center;min-height:180px;padding:1.2rem}
.pricing{display:grid;gap:.28rem;margin:.6rem 0 1rem}.price{display:block;font-size:1.8rem;line-height:1.15;letter-spacing:-.04em}
.quiet,small{color:var(--muted)}.card p{margin:.15rem 0}.pill{width:fit-content;display:inline-block;font-size:.72rem;font-weight:750;border-radius:10rem;background:#eef0f2;padding:.25rem .65rem}
.demo{background:#fff2a0}.detail{display:grid;gap:1rem}.detail .art{border-radius:1rem;min-height:265px}
.detail .device{transform:rotate(-13deg) scale(1.35)}
.panel{margin-block:1rem}.detail .panel{margin:0}.back{display:inline-block;margin-bottom:1rem}.preserve{white-space:pre-wrap}
.narrow{max-width:30rem;margin-inline:auto}.notice{background:#fff5b5;padding:.65rem .8rem;border-radius:.5rem}
.manage{padding:0;list-style:none}.manage li{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.65rem 0;border-bottom:1px solid var(--line)}
.table-scroll{overflow:auto;border-radius:1rem;border:1px solid var(--line);background:white}
table{border-collapse:collapse;width:100%}th,td{text-align:left;padding:.7rem;border-bottom:1px solid var(--line);vertical-align:top}
td input:not([type=checkbox]){min-width:6rem}.chart{width:100%;height:auto}.chart line{stroke:#ccd2d7}.chart circle{fill:#254275}
.periods{display:flex;flex-wrap:wrap;gap:.75rem}.periods a{color:var(--ink)}.periods [aria-current]{font-weight:800}
@media(min-width:520px){.filters{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:750px){.hero{grid-template-columns:3fr 2fr}.hero-art{display:grid;place-items:center}.detail{grid-template-columns:2fr 3fr}}
@media(min-width:1000px){.filters{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}}
.generation-nav,.variant-links{display:flex;flex-wrap:wrap;gap:.5rem}
.generation-nav{margin:0 0 1rem}
.generation-nav a,.variant-links a{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .7rem;min-height:44px;border:1px solid var(--line);border-radius:.6rem;background:var(--white);color:var(--ink);text-decoration:none;font-weight:700;font-size:.86rem}
.generation-nav a[aria-current]{background:var(--ink);border-color:var(--ink);color:var(--white)}
.generation-nav a span{font-size:.78rem;font-variant-numeric:tabular-nums}
.variant-links{padding:0;margin:.45rem 0 0;list-style:none}
.variant-links a:hover{border-color:var(--ink)}
.generation-nav a:focus-visible,.variant-links a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#catalogo .grid{grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr))}

/* Vitrine Johnny iPhone */
body:has(#catalogo){
  color-scheme:dark;
  --ink:#f5f3ef;
  --muted:#aaa59c;
  --paper:#080808;
  --yellow:#f5c355;
  --line:#2c2822;
  --white:#10100f;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 7% 33%,#f5c35536 0 1px,transparent 2px) 0 0/233px 221px,
    radial-gradient(circle at 74% 38%,#f5c35524 0 1px,transparent 3px) 0 0/379px 311px,
    #080808;
}
body:has(#catalogo) .wrap{width:min(1240px,calc(100% - clamp(2rem,10vw,10rem)))}
body:has(#catalogo) header{
  position:sticky;top:0;z-index:5;color:var(--ink);
  background:#080808f2;border-bottom:1px solid var(--line);backdrop-filter:blur(14px);
}
body:has(#catalogo) header::after{
  content:"";position:absolute;bottom:-1px;left:0;width:29%;height:1px;
  background:linear-gradient(90deg,transparent,var(--yellow));pointer-events:none;
}
body:has(#catalogo) .nav{min-height:58px;padding-block:.65rem}
body:has(#catalogo) .logo{font-size:1rem;letter-spacing:-.04em}
body:has(#catalogo) header nav a{color:var(--muted);font-weight:650}
body:has(#catalogo) header nav a:hover{color:var(--yellow)}
body:has(#catalogo) footer{background:#0c0b0a;border-top:1px solid var(--line)}
body:has(#catalogo) .hero{
  position:relative;isolation:isolate;min-height:clamp(390px,67vh,670px);
  padding:clamp(2rem,6vw,5rem) 0;margin:0;
  background:radial-gradient(ellipse at 80% 50%,#65401546,transparent 54%);
}
body:has(#catalogo) .hero h1{font-size:clamp(3rem,7vw,6.6rem);max-width:12ch;letter-spacing:-.075em}
body:has(#catalogo) .hero p{font-size:clamp(1rem,1.4vw,1.18rem);color:var(--muted)}
body:has(#catalogo) .hero .button,#catalogo button{
  border-radius:100vmax;background:var(--yellow);color:#171005;
  box-shadow:0 5px 22px #f5c35524;
}
.gold-title{
  font-style:normal;color:#f5c355;
  background:linear-gradient(112deg,#e3a93f,#ffe4a2 53%,#edb44a);
  background-clip:text;-webkit-text-fill-color:transparent;
}
#catalogo{scroll-margin-top:76px;padding:clamp(2.5rem,6vw,6rem) 0 2rem}
#catalogo .section-head{margin-bottom:2rem;align-items:end}
#catalogo .section-head h2{font-size:clamp(2.65rem,5.2vw,4.8rem);max-width:17ch;line-height:.99;letter-spacing:-.07em}
#catalogo .section-head p{color:var(--muted);max-width:54ch;font-size:clamp(1rem,1.5vw,1.15rem);margin:1.25rem 0 0}
#catalogo .section-head .eyebrow{color:var(--muted);letter-spacing:.2em}
#catalogo .section-head>a{color:var(--yellow);font-weight:650}
#catalogo .generation-nav{
  width:fit-content;max-width:100%;gap:.2rem;padding:.24rem;margin:0 0 1.1rem;
  border:1px solid var(--line);border-radius:1.5rem;background:#0b0b0a;
}
#catalogo .generation-nav a{
  padding:.4rem .85rem;border:1px solid transparent;border-radius:100vmax;
  background:transparent;color:var(--muted);
}
#catalogo .generation-nav a:hover{color:var(--ink);background:#1a1713}
#catalogo .generation-nav a[aria-current]{
  background:var(--yellow);color:#171005;box-shadow:0 3px 16px #f5c35538;
}
#catalogo .generation-nav a span{opacity:.86;font-weight:550}
.catalog-filters{margin:0 0 1rem}
.catalog-filters summary{width:fit-content;cursor:pointer;color:var(--ink);padding:.55rem .65rem;font-weight:650;font-size:.9rem}
#catalogo .filters{background:#12110f;border-color:var(--line);margin-top:.5rem}
#catalogo .filters :is(input,select){background:#090909;border-color:#474039;color:var(--ink)}
#catalogo .grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.65rem,1.55vw,1.4rem)}
#catalogo .card{position:relative;background:#100e0c;border-color:#2a2520;border-radius:clamp(1rem,2vw,1.8rem)}
#catalogo .card:hover,#catalogo .card:focus-within{border-color:#896a37}
#catalogo .art{
  position:relative;isolation:isolate;overflow:hidden;min-height:clamp(205px,23vw,305px);
  background:radial-gradient(ellipse at 50% 82%,#80613731,transparent 63%),#0e0c0a;
}
#catalogo .card-body{padding:clamp(.95rem,1.65vw,1.4rem)}
#catalogo .card-body>.eyebrow{color:var(--muted);letter-spacing:.09em}
#catalogo .card h3{font-size:clamp(1.2rem,1.9vw,1.7rem);margin:.45rem 0 .3rem}
#catalogo .pricing{margin-bottom:1.1rem}
#catalogo .price{font-size:clamp(1.3rem,2.1vw,1.9rem);color:var(--yellow)}
#catalogo .pill{background:#29231a;color:#e8d4a6}
#catalogo .variant-links{margin-top:auto;padding-top:.55rem}
#catalogo .variant-links a{background:#181613;border-color:#353028;border-radius:100vmax;padding:.3rem .65rem;font-size:.79rem}
#catalogo .variant-links a{position:relative;z-index:2}
#catalogo .variant-links span{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);font-size:.79rem}
#catalogo .card .card-buy{margin-top:.9rem;justify-content:center;text-align:center;font-size:.85rem}
#catalogo .card-buy::after{content:"";position:absolute;inset:0;z-index:1;cursor:pointer}
#catalogo .variant-links a:hover{border-color:var(--yellow);color:var(--yellow)}
#catalogo .empty{background:#100e0c}
#catalogo .generation-nav a:focus-visible,#catalogo .variant-links a:focus-visible{outline-color:var(--yellow)}
@media(max-width:960px){#catalogo .grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){
  #catalogo .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #catalogo{scroll-margin-top:105px}
  #catalogo .art{min-height:185px}
  body:has(#catalogo) .hero{min-height:0;padding-block:4rem}
}
@media(max-width:410px){
  body:has(#catalogo) header nav{gap:.65rem}
  #catalogo .card-body{padding:.75rem}
  #catalogo .variant-links a{font-size:.75rem;padding-inline:.45rem}
}


.product-photo{display:block;width:100%;height:auto;object-fit:contain}

#catalogo .art .product-photo{height:clamp(155px,20vw,278px);width:auto;max-width:100%}
.detail .art .product-photo{width:min(100%,400px)}
body:has(#catalogo) .hero-art .product-photo{
  width:min(100%,315px);
  filter:drop-shadow(0 22px 24px #0009);
}
@media(max-width:700px){#catalogo .art{padding:.6rem}}
@keyframes storefront-scroll-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@supports(animation-timeline:scroll(root block)){
  @media(prefers-reduced-motion:no-preference){
    body:has(#catalogo) header::after{
      width:100%;transform-origin:left;
      animation:storefront-scroll-progress linear both;
      animation-timeline:scroll(root block);
    }
  }
}
body:has(#catalogo) main.wrap{padding-top:0}
.scroll-showcase{
  --story-top:58px;
  --story-height:calc(100svh - var(--story-top));
  scroll-margin-top:var(--story-top);
}
.story-stage{
  position:relative;isolation:isolate;
  min-height:min(650px,var(--story-height));
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;gap:clamp(1rem,4vw,4rem);
  background:radial-gradient(ellipse at 74% 48%,#a5642027,transparent 46%);
}
.story-text{grid-column:1;grid-row:1;z-index:2}
.story-copy{max-width:34rem}
.story-copy h1,.story-copy h2{
  font-size:clamp(2.7rem,5.6vw,5.4rem);line-height:.99;
  letter-spacing:-.071em;margin:.28em 0 .33em;max-width:13ch;
}
.story-copy p{color:var(--muted);font-size:clamp(.98rem,1.45vw,1.15rem);max-width:37ch;margin:0 0 1.6rem}
.story-copy .eyebrow{color:var(--yellow)}
.story-copy .button{border-radius:100vmax;background:var(--yellow);color:#171005}
.story-fallback{grid-column:2;grid-row:1;display:grid;place-items:center;padding-block:1rem}
.story-fallback img{width:min(88%,350px);filter:drop-shadow(0 18px 38px #000c)}
.story-canvas,.story-scroll,.story-steps,.story-copy:not(.is-current){display:none}
.scroll-showcase.has-motion{height:470svh}
.has-motion .story-stage{
  display:block;position:sticky;top:var(--story-top);height:var(--story-height);
  min-height:0;overflow:hidden;
}
.has-motion .story-canvas{position:absolute;inset:0;display:block;pointer-events:none}
.story-canvas canvas{display:block;width:100%;height:100%}
.has-motion .story-fallback{display:none}
.has-motion .story-text{position:absolute;inset:0;pointer-events:none}
.has-motion .story-copy{
  display:block;position:absolute;left:0;top:50%;width:43%;
  transform:translateY(calc(-50% + 1.2rem));opacity:0;visibility:hidden;
  transition:opacity .3s ease,transform .45s ease,visibility 0s .45s;
}
.has-motion .story-copy.is-current{
  opacity:1;visibility:visible;transform:translateY(-50%);
  transition-delay:0s;pointer-events:auto;
}
.has-motion .story-exit{top:auto;bottom:11%;left:50%;width:max-content;max-width:100%;transform:translate(-50%,.75rem)}
.has-motion .story-exit.is-current{transform:translate(-50%,0)}
.story-exit .button{background:#11100e;color:var(--ink);border-color:var(--line)}
.has-motion[data-scene="0"] .story-scroll{
  display:block;position:absolute;bottom:1rem;left:0;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
@media(min-width:1000px){
  .has-motion .story-steps{
    display:grid;gap:.35rem;position:absolute;right:0;top:50%;transform:translateY(-50%);
    border-right:1px solid var(--line);z-index:3;
  }
  .story-steps button{
    display:block;text-align:right;min-height:36px;background:none;border:0;border-radius:0;
    color:var(--muted);padding:.3rem .65rem;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  }
  .story-steps button[aria-current]{color:var(--yellow);box-shadow:1px 0 var(--yellow)}
}
@media(max-width:700px){
  .scroll-showcase{--story-top:86px}
  .scroll-showcase.has-motion{height:420svh}
  .story-stage{grid-template-columns:1fr;gap:.25rem;padding-block:1.5rem}
  .story-fallback{grid-column:1;grid-row:1;padding:0}
  .story-fallback img{width:min(60%,225px)}
  .story-text{grid-row:2}
  .story-copy h1,.story-copy h2{font-size:clamp(2.2rem,8vw,3.55rem);max-width:17ch}
  .story-copy p{margin-bottom:.8rem;font-size:.95rem}
  .has-motion .story-stage{padding:0;background:radial-gradient(ellipse at 50% 27%,#a564202a,transparent 49%)}
  .has-motion .story-copy{top:55%;width:100%;transform:translateY(1rem)}
  .has-motion .story-copy.is-current{transform:translateY(0)}
  .has-motion .story-exit{top:auto;bottom:14%;width:max-content}
  .has-motion .story-exit.is-current{transform:translate(-50%,0)}
  .has-motion .story-canvas{mask-image:linear-gradient(to bottom,#000 0 48%,transparent 56%)}
  .has-motion[data-scene="0"] .story-scroll{display:none}
}
@media(max-height:650px) and (max-width:700px){
  .has-motion .story-copy{top:48%}
  .has-motion .story-exit{top:auto}
  .story-copy h1,.story-copy h2{font-size:clamp(1.8rem,7vw,2.6rem)}
}
@keyframes story-catalog-entry{
  from{opacity:.35;transform:translateY(1.3rem)}
  to{opacity:1;transform:translateY(0)}
}
@supports(animation-timeline:view(block)){
  @media(prefers-reduced-motion:no-preference){
    #catalogo .card{
      animation:story-catalog-entry linear both;
      animation-timeline:view(block);
      animation-range:entry 0% entry 72%;
    }
  }
}
.model-credit{margin:0;font-size:.75rem}
.story-actions{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.story-actions .outline{background:#11100e;color:var(--ink);border-color:#40382c}
.story-actions .outline:hover{border-color:var(--yellow)}