/* SuperSuplementos — hoja de estilo de páginas de producto (SEO) */
:root{
  --void:#04050A;--deep:#070910;--carbon:#0B0E16;--steel:#121623;--glass:rgba(18,22,35,.66);
  --line:rgba(120,160,255,.10);--line2:rgba(120,160,255,.2);
  --bone:#F2F4F8;--ash:#AEB7C7;--ash2:#7A8496;
  --volt:#F8E71C;--volt2:#FFB300;--cyan:#38E5FF;
  --gold:#F5A623;--ion:#4D8DFF;--ember:#FF5A1F;--viola:#A78BFA;--aqua:#2EE6C8;--green:#7BE0A0;--chrome:#AEB8C4;
  --ok:#37E08B;--bad:#FF5E6C;
  --disp:'Archivo','Arial Black',Arial,sans-serif;--body:'Manrope','Segoe UI',Arial,sans-serif;--mono:'JetBrains Mono','Consolas',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:112.5%}
@media(max-width:600px){html{font-size:106.25%}}
body{background:var(--void);color:var(--bone);font-family:var(--body);font-size:1rem;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;color:inherit;font-family:inherit}
img{max-width:100%}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
::selection{background:var(--volt);color:var(--void)}

.bg-orb{position:fixed;border-radius:50%;filter:blur(90px);opacity:.4;z-index:0;pointer-events:none}
.bg-orb.a{width:520px;height:520px;top:-160px;right:-120px;background:radial-gradient(circle,rgba(248,231,28,.14),transparent 70%)}
.bg-orb.b{width:440px;height:440px;bottom:4%;left:-160px;background:radial-gradient(circle,rgba(56,229,255,.12),transparent 70%)}

nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px;background:rgba(4,5,10,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.logo{font-family:var(--disp);font-size:1.15rem;letter-spacing:-.02em;display:flex;align-items:center;gap:9px;color:var(--bone)}
.logo .lg-y{color:var(--volt)}
.logo .bi{color:var(--void);background:linear-gradient(140deg,var(--volt),var(--volt2));width:26px;height:26px;border-radius:6px;display:grid;place-items:center;font-size:.9rem;transform:skewX(-6deg)}
.nlinks{display:flex;gap:18px;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);flex-wrap:wrap}
.nlinks a:hover{color:var(--volt)}
@media(max-width:720px){.nlinks{display:none}}

main{position:relative;z-index:1;padding:26px 0 40px}
.crumb{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ash2);margin-bottom:22px;display:flex;gap:7px;flex-wrap:wrap}
.crumb a:hover{color:var(--cyan)}
.crumb span{color:var(--ash2)}

.phero{display:grid;grid-template-columns:.85fr 1.15fr;gap:34px;align-items:start}
@media(max-width:820px){.phero{grid-template-columns:1fr}}
.pimg{background:linear-gradient(158deg,#fafbfc,#e8ecf1);border:1px solid var(--line);border-radius:18px;display:grid;place-items:center;padding:34px;min-height:340px;position:sticky;top:88px}
.pimg img{max-width:100%;max-height:360px;object-fit:contain;filter:drop-shadow(0 22px 40px rgba(0,0,0,.35))}
@media(max-width:820px){.pimg{position:static;min-height:260px}}
.peyebrow{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent,var(--volt));margin-bottom:12px;display:flex;align-items:center;gap:10px}
.peyebrow .badge{background:var(--accent,var(--volt));color:var(--void);border-radius:5px;padding:3px 8px;font-weight:700;letter-spacing:.06em}
h1{font-family:var(--disp);font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.1;letter-spacing:-.01em;margin-bottom:16px}
.pmeta{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;margin-bottom:22px}
.pprice{font-family:var(--disp);font-size:2.4rem;color:var(--volt)}
.prate{font-family:var(--mono);font-size:.8rem;color:var(--gold)}
.pcpu-big{font-family:var(--mono);font-size:.82rem;color:var(--aqua);letter-spacing:.02em;align-self:center}
.pmeta small{font-family:var(--mono);font-size:.6rem;color:var(--ash2);text-transform:uppercase;letter-spacing:.06em;display:block}
.puse{font-size:.92rem;color:var(--ash);border-left:2px solid var(--accent,var(--volt));padding-left:16px;margin-bottom:24px;line-height:1.6}
.puse b{color:var(--bone)}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:26px}
@media(max-width:560px){.pc{grid-template-columns:1fr}}
.pc h4{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.pc .pros h4{color:var(--ok)}.pc .cons h4{color:var(--bad)}
.pc ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.pc li{font-size:.86rem;color:var(--ash);display:flex;gap:9px;line-height:1.5}
.pc .pros li::before{content:'✓';color:var(--ok);font-weight:700;flex:none}
.pc .cons li::before{content:'✕';color:var(--bad);font-weight:700;flex:none}
.pacts{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;font-weight:700;padding:16px 26px;border-radius:9px;transition:.22s;text-transform:uppercase}
.btn-volt{background:linear-gradient(140deg,var(--volt),var(--volt2));color:var(--void)}
.btn-volt:hover{box-shadow:0 0 26px -6px var(--volt);transform:translateY(-2px)}
.btn-cy{border:1px solid var(--line2);color:var(--bone);background:var(--glass)}
.btn-cy:hover{border-color:var(--cyan);color:var(--cyan)}
.btn-ghost{border:1px solid var(--line2);color:var(--ash);background:transparent;font-size:.72rem;padding:16px 22px}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.pnote{font-size:.8rem;color:var(--ash);line-height:1.6;max-width:52ch}
.pnote b{color:var(--bone)}
.pdesc{margin:26px 0 0;font-size:.9rem;color:var(--ash);line-height:1.7;border-top:1px solid var(--line);padding-top:22px}

.ad-inarticle{margin:44px auto;max-width:760px;min-height:1px;text-align:center}
.ad-label{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ash2);margin-bottom:8px}
.ad-inarticle ins{display:block}
.sec{margin-top:60px}
.sec h2{font-family:var(--disp);font-size:1.5rem;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:6px}
.sec .sub{font-size:.86rem;color:var(--ash);margin-bottom:22px}
.sec h2 span{color:var(--volt)}
.rel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.rel-grid{grid-template-columns:repeat(2,1fr)}}
.rc{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;background:var(--glass);overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s}
.rc:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent,var(--volt)) 55%,transparent);box-shadow:0 16px 32px -20px var(--accent,var(--volt))}
.rc-img{background:linear-gradient(158deg,#fafbfc,#e8ecf1);height:150px;display:grid;place-items:center;padding:16px}
.rc-img img{max-width:100%;max-height:100%;object-fit:contain}
.rc-b{padding:14px;display:flex;flex-direction:column;gap:8px;flex:1}
.rc-cat{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent,var(--volt))}
.rc-name{font-size:.82rem;font-weight:600;color:var(--bone);line-height:1.35;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rc-row{display:flex;align-items:center;justify-content:space-between;margin-top:2px}
.rc-price{font-family:var(--mono);font-size:.88rem;color:var(--volt);font-weight:700}
.rc-go{font-family:var(--mono);font-size:.64rem;color:var(--cyan)}

.about .prose-txt{max-width:760px}
.prose-txt p{color:var(--ash);font-size:1rem;line-height:1.8;margin-bottom:15px}
.prose-txt p:first-child{color:var(--bone);font-size:1.06rem}
.spec{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0 30px;margin-top:26px;max-width:760px}
.spec li{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.85rem}
.spec li span{color:var(--ash2);font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase}
.spec li b{color:var(--bone);text-align:right}
.pfaq{max-width:820px}
.pfaq details{border:1px solid var(--line);border-radius:12px;background:var(--glass);margin-bottom:10px;overflow:hidden}
.pfaq summary{padding:16px 20px;font-weight:600;color:var(--bone);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:.92rem}
.pfaq summary::-webkit-details-marker{display:none}
.pfaq summary::after{content:'+';color:var(--volt);font-size:1.3rem;font-family:var(--mono);flex:none;transition:transform .2s}
.pfaq details[open] summary::after{transform:rotate(45deg)}
.pfaq details p{padding:0 20px 18px;color:var(--ash);font-size:.88rem;line-height:1.65}
.catlinks{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.catlinks a{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ash);border:1px solid var(--line2);border-radius:99px;padding:9px 15px;transition:.2s}
.catlinks a:hover{color:var(--void);background:var(--volt);border-color:var(--volt)}

footer{margin-top:70px;border-top:1px solid var(--line);background:var(--deep)}
footer .wrap{padding:40px 24px}
.fcols{display:flex;flex-wrap:wrap;gap:30px 60px;margin-bottom:26px}
.fcol h5{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ash2);margin-bottom:12px}
.fcol a{display:block;color:var(--ash);font-size:.84rem;margin-bottom:8px;transition:.2s}
.fcol a:hover{color:var(--volt)}
.fdisc{font-family:var(--mono);font-size:.6rem;color:var(--ash2);line-height:1.7;border-top:1px solid var(--line);padding-top:20px;letter-spacing:.03em}

/* hub /producto */
.hub-head{padding:20px 0 30px}
.hub-cat{margin-top:40px}
.hub-cat h2{font-family:var(--disp);font-size:1.3rem;text-transform:uppercase;margin-bottom:16px;border-left:3px solid var(--accent,var(--volt));padding-left:12px}
.hub-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px 22px}
.hub-list a{font-size:.86rem;color:var(--ash);padding:6px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;transition:.2s}
.hub-list a:hover{color:var(--bone)}
.hub-list a b{color:var(--volt);font-family:var(--mono);font-size:.78rem;font-weight:700;flex:none}

/* ===== móvil ===== */
@media(max-width:560px){
  .wrap{padding:0 16px}
  main{padding:18px 0 30px}
  nav{padding:12px 16px}
  h1{font-size:clamp(1.5rem,6.5vw,2rem)}
  .pacts{flex-direction:column;gap:10px}
  .pacts .btn{width:100%;justify-content:center}
  .btn-ghost{font-size:.78rem}
  .pprice{font-size:2rem}
  .pimg{min-height:210px;padding:20px}
  .rel-grid{grid-template-columns:1fr 1fr;gap:12px}
  .rc-img{height:118px}
  .rc-name{font-size:.78rem}
  .spec{grid-template-columns:1fr;gap:0}
  .sec h2{font-size:1.3rem}
  .hub-list{grid-template-columns:1fr}
}