/* iOutlet Perf Check — "Ainda Aguenta?"
   Light, calm, Apple-adjacent. Inter (brand). HEX tokens (audience runs old
   phones → no OKLCH support on iOS 12 / old Android). Honest, not alarmist. */
.io-pc-wrap{
  --pc-ink:#1a1c1e; --pc-muted:#5b626a; --pc-faint:#8b9098;
  --pc-bg:#ffffff; --pc-surface:#f6f7f9; --pc-line:#e6e9ed;
  --pc-green-ink:#1f6e3b; --pc-green-bg:#eef7f1; --pc-green-bd:#cfe6d6; --pc-green-dot:#2f8f4e;
  --pc-amber-ink:#875a11; --pc-amber-bg:#fdf5e8; --pc-amber-bd:#f0dcb6; --pc-amber-dot:#c08214;
  --pc-red-ink:#9a3322;   --pc-red-bg:#fbefec;   --pc-red-bd:#f0d2ca;   --pc-red-dot:#c0432f;
  --pc-gray-ink:#5b626a;  --pc-gray-bg:#f4f5f7;  --pc-gray-bd:#e3e6ea;  --pc-gray-dot:#a3a8af;
  --pc-r:14px; --pc-r-sm:10px;
  --pc-s1:.5rem; --pc-s2:.75rem; --pc-s3:1rem; --pc-s4:1.5rem; --pc-s5:2rem;
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  max-width:660px; margin:0 auto; padding:clamp(1.5rem,5vw,3rem) 1.15rem;
  color:var(--pc-ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.io-pc-wrap *{box-sizing:border-box}

/* Type */
.io-pc-wrap h1{
  font-size:clamp(1.55rem,1.25rem+1.7vw,2.15rem); line-height:1.12;
  letter-spacing:-.022em; font-weight:700; margin:0 0 var(--pc-s2);
  text-wrap:balance;
}
.io-pc-sub{
  color:var(--pc-muted); font-size:1.02rem; line-height:1.55;
  max-width:54ch; margin:0 0 var(--pc-s4);
}

/* Search form */
.io-pc-form{display:flex; flex-wrap:wrap; gap:var(--pc-s1); align-items:flex-end; margin:0 0 var(--pc-s4)}
.io-pc-form label{flex:1 1 100%; font-weight:600; font-size:.82rem; letter-spacing:.01em; color:var(--pc-muted)}
.io-pc-form input{
  flex:1 1 230px; padding:.72rem .85rem; font-size:1rem; color:var(--pc-ink);
  background:var(--pc-bg); border:1px solid var(--pc-line); border-radius:var(--pc-r-sm);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.io-pc-form input:focus{outline:0; border-color:#1a1c1e; box-shadow:0 0 0 3px rgba(26,28,30,.08)}
.io-pc-form button{
  padding:.72rem 1.4rem; font-size:.98rem; font-weight:600; cursor:pointer;
  color:#fff; background:#1a1c1e; border:0; border-radius:var(--pc-r-sm);
  transition:transform .12s ease, opacity .15s ease;
}
.io-pc-form button:hover{opacity:.9}
.io-pc-form button:active{transform:translateY(1px)}

.io-pc-unknown{
  background:var(--pc-amber-bg); border:1px solid var(--pc-amber-bd); color:var(--pc-amber-ink);
  padding:.8rem .95rem; border-radius:var(--pc-r-sm); font-size:.95rem; margin:0 0 var(--pc-s3);
}

/* Models nav (hub) */
.io-pc-models{margin:var(--pc-s2) 0 var(--pc-s5)}
.io-pc-models>p{font-size:.82rem; font-weight:600; letter-spacing:.01em; color:var(--pc-muted); margin:0 0 var(--pc-s2)}
.io-pc-models ul{display:flex; flex-wrap:wrap; gap:.45rem; list-style:none; padding:0; margin:0}
.io-pc-models a{
  display:inline-block; padding:.4rem .7rem; font-size:.9rem; font-weight:500;
  color:var(--pc-ink); text-decoration:none; background:var(--pc-surface);
  border:1px solid var(--pc-line); border-radius:999px; transition:background .15s ease, border-color .15s ease;
}
.io-pc-models a:hover{background:#eef0f3; border-color:#d9dde2}

/* Verdict — the hero */
.io-pc-global{
  display:flex; align-items:flex-start; gap:.7rem;
  padding:1.05rem 1.2rem; border-radius:var(--pc-r); border:1px solid transparent;
  font-size:clamp(1.05rem,1rem+.5vw,1.2rem); font-weight:600; line-height:1.32;
  margin:0 0 var(--pc-s3);
}
.io-pc-global::before{
  content:""; flex:0 0 auto; width:12px; height:12px; border-radius:50%; margin-top:.42em;
}
.io-pc-global.io-pc-green {background:var(--pc-green-bg); border-color:var(--pc-green-bd); color:var(--pc-green-ink)}
.io-pc-global.io-pc-yellow{background:var(--pc-amber-bg); border-color:var(--pc-amber-bd); color:var(--pc-amber-ink)}
.io-pc-global.io-pc-red   {background:var(--pc-red-bg);   border-color:var(--pc-red-bd);   color:var(--pc-red-ink)}
.io-pc-global.io-pc-unknown{background:var(--pc-gray-bg); border-color:var(--pc-gray-bd); color:var(--pc-gray-ink)}
.io-pc-global.io-pc-green::before {background:var(--pc-green-dot)}
.io-pc-global.io-pc-yellow::before{background:var(--pc-amber-dot)}
.io-pc-global.io-pc-red::before   {background:var(--pc-red-dot)}
.io-pc-global.io-pc-unknown::before{background:var(--pc-gray-dot)}

/* Facts — editorial spec strip, not generic pills */
.io-pc-facts{
  display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .7rem;
  list-style:none; padding:0; margin:0 0 var(--pc-s4);
  font-size:.92rem; font-weight:500; color:var(--pc-muted);
}
.io-pc-facts li{display:inline-flex; align-items:center}
.io-pc-facts li+li::before{content:"·"; margin-right:.7rem; color:var(--pc-faint)}
.io-pc-facts li:first-child{color:var(--pc-ink); font-weight:600}

/* Axes */
.io-pc-axes{list-style:none; padding:0; margin:0 0 var(--pc-s3)}
.io-pc-axis{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.65rem;
  padding:.7rem 0; border-top:1px solid var(--pc-line);
}
.io-pc-axis:last-child{border-bottom:1px solid var(--pc-line)}
.io-pc-axis-name{font-weight:600; font-size:.96rem; color:var(--pc-ink)}
.io-pc-axis-msg{font-size:.9rem; color:var(--pc-muted); text-align:right}
.io-pc-dot{width:9px; height:9px; border-radius:50%; flex:0 0 auto}
.io-pc-green  .io-pc-dot{background:var(--pc-green-dot)}
.io-pc-yellow .io-pc-dot{background:var(--pc-amber-dot)}
.io-pc-red    .io-pc-dot{background:var(--pc-red-dot)}
.io-pc-unknown .io-pc-dot{background:var(--pc-gray-dot)}

.io-pc-verified{color:var(--pc-faint); font-size:.82rem; margin:0 0 var(--pc-s4)}

/* Storage — calm aside */
.io-pc-storage{
  background:var(--pc-surface); border:1px solid var(--pc-line); border-radius:var(--pc-r);
  padding:1.15rem 1.25rem; margin:var(--pc-s4) 0;
}
.io-pc-storage h2{font-size:1.08rem; line-height:1.25; letter-spacing:-.01em; font-weight:650; margin:0 0 var(--pc-s2)}
.io-pc-storage p{color:var(--pc-muted); font-size:.95rem; line-height:1.55; max-width:60ch; margin:0 0 var(--pc-s2)}
.io-pc-storage ul{margin:0; padding-left:1.15rem; color:var(--pc-muted); font-size:.92rem}
.io-pc-storage li+li{margin-top:.3rem}

/* CTA — primary trade-in, secondary ghost shop */
.io-pc-cta{margin:var(--pc-s4) 0}
.io-pc-cta p{font-size:1rem; line-height:1.5; max-width:54ch; margin:0 0 var(--pc-s2)}
.io-pc-cta a{
  display:inline-flex; align-items:center; gap:.3rem; text-decoration:none;
  font-weight:600; font-size:.96rem; padding:.65rem 1.15rem; border-radius:var(--pc-r-sm);
  transition:background .15s ease, border-color .15s ease, transform .12s ease;
}
.io-pc-cta-trade{color:#fff; background:#1a1c1e; margin-right:.5rem}
.io-pc-cta-trade:hover{background:#000}
.io-pc-cta-shop{color:var(--pc-ink); background:transparent; border:1px solid var(--pc-line)}
.io-pc-cta-shop:hover{border-color:#c9ced4; background:var(--pc-surface)}
.io-pc-cta a:active{transform:translateY(1px)}

/* Motion — one orchestrated entrance, transforms only */
@media (prefers-reduced-motion:no-preference){
  .io-pc-global,.io-pc-facts,.io-pc-axes,.io-pc-verified,.io-pc-storage,.io-pc-cta{
    animation:io-pc-rise .5s cubic-bezier(.22,.61,.36,1) both;
  }
  .io-pc-facts{animation-delay:.05s}
  .io-pc-axes{animation-delay:.1s}
  .io-pc-verified{animation-delay:.14s}
  .io-pc-storage{animation-delay:.18s}
  .io-pc-cta{animation-delay:.22s}
}
@keyframes io-pc-rise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* Hub: intro + FAQ (telemóvel lento) */
.io-pc-intro{margin:0 0 var(--pc-s4)}
.io-pc-intro h2{font-size:1.15rem; line-height:1.25; letter-spacing:-.01em; font-weight:650; margin:0 0 var(--pc-s2)}
.io-pc-intro p{color:var(--pc-muted); font-size:1rem; line-height:1.6; max-width:62ch; margin:0}
.io-pc-faq{margin:0 0 var(--pc-s4)}
.io-pc-faq-item{border-top:1px solid var(--pc-line)}
.io-pc-faq-item:last-child{border-bottom:1px solid var(--pc-line)}
.io-pc-faq-item summary{cursor:pointer; list-style:none; font-weight:600; font-size:.98rem; color:var(--pc-ink); padding:.85rem 1.6rem .85rem 0; position:relative}
.io-pc-faq-item summary::-webkit-details-marker{display:none}
.io-pc-faq-item summary::after{content:"+"; position:absolute; right:.15rem; top:.72rem; font-size:1.25rem; font-weight:400; line-height:1; color:var(--pc-faint)}
.io-pc-faq-item[open] summary::after{content:"\2013"}
.io-pc-faq-item p{margin:0 0 .95rem; color:var(--pc-muted); font-size:.94rem; line-height:1.55; max-width:62ch}

@media (max-width:430px){
  .io-pc-axis{grid-template-columns:auto 1fr; gap:.4rem .6rem}
  .io-pc-axis-msg{grid-column:2; text-align:left; margin-top:-.15rem}
}