/* Tema oscuro Linkeads: negro + un solo acento morado. Se carga el último. */ :root{ /* Paleta Kunfupay (guía de marca): morado 500 #734BFC, gradiente de acción 500→700, naranja solo para la acción suprema */ --p50:#F4F3FF;--p100:#EAE8FF;--p200:#D9D4FF;--p300:#BCB2FF;--p400:#9C87FE;--p500:#734BFC;--p600:#6B33F4;--p700:#5C21E0;--p800:#4D1BBC;--p900:#41189A;--p950:#260D68; --z950:#09090B;--z900:#18181B;--surface:#111114;--cardk:#161618;--z700:#3F3F46;--z500:#71717A;--z400:#A1A1AA;--z300:#D4D4D8;--z100:#F4F4F5;--z50:#FAFAFA; --success:#16A34A;--warning:#F59E0B;--danger:#F04438;--info:#3B82F6;--hot:#F97316;--hot2:#EA580C; --action:linear-gradient(135deg,#734BFC 0%,#5C21E0 100%); --bg:#09090B;--card:#161618;--card2:#111114;--line:rgba(255,255,255,.07);--txt:#FAFAFA;--mut:#A1A1AA; --blue:#734BFC;--blue2:#5C21E0;--green:#4ADE80;--wa:#16A34A;--hover:rgba(115,75,252,.12);--org:#9C87FE; --sh:0 0 0 1px rgba(255,255,255,.07),0 10px 30px -18px rgba(0,0,0,.9); --sh2:0 0 0 1px rgba(115,75,252,.6),0 24px 60px -20px rgba(92,33,224,.6)} html{color-scheme:dark} body{background:radial-gradient(900px 520px at 85% -10%,rgba(92,33,224,.30),transparent 60%),radial-gradient(800px 460px at -8% 8%,rgba(115,75,252,.14),transparent 55%),#09090B!important;color:var(--txt)} ::selection{background:#5C21E0;color:#fff} a,button,input,select,textarea{color:inherit} /* barra superior */ .top{background:rgba(9,9,11,.72)!important;border-bottom:1px solid var(--line)!important;box-shadow:none!important} .logo{color:#fff}.logo img{width:36px;height:36px;display:block;filter:drop-shadow(0 6px 14px rgba(92,33,224,.55));transition:transform .35s cubic-bezier(.2,.9,.3,1.4)} .logo:hover img{transform:rotate(-8deg) scale(1.08)} .search{background:rgba(255,255,255,.06)!important;color:var(--mut)} .search:focus-within{background:#14141a!important;border-color:#734BFC!important;box-shadow:0 0 0 4px rgba(115,75,252,.18)!important;color:#BCB2FF!important} .search input{color:var(--txt)}::placeholder{color:#7d7694} .nav a{color:var(--mut)}.nav a:hover{color:#fff;background:rgba(255,255,255,.06)}.nav a.on{color:#fff}.nav a.on:after{background:linear-gradient(90deg,#734BFC,#9C87FE)} /* superficies */ .box,.pcard,#tool,.trust div,.step,.faq,.kpi,.vt,.news,.cta{background:var(--card)!important;color:var(--txt)} .box,.pcard,#tool,.trust div,.step,.faq,.kpi{box-shadow:var(--sh)!important} .cta{background:linear-gradient(160deg,#161618,#111114)!important} .pcard:hover,a.step:hover{box-shadow:var(--sh2)!important} .pcard.dest:before{background:linear-gradient(90deg,#734BFC,#9C87FE)} /* hero */ .hero{background:linear-gradient(125deg,#260D68 0%,#41189A 52%,#5C21E0 100%)!important;box-shadow:0 30px 70px -30px rgba(92,33,224,.7),0 0 0 1px rgba(255,255,255,.08)!important} .hero:before,.hero:after{background:radial-gradient(circle,rgba(156,135,254,.9),transparent 65%)} .hero h1{background:linear-gradient(180deg,#fff,#d8c7ff);-webkit-background-clip:text;background-clip:text;color:transparent} .hero .grid{background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px)} .trust .ti{background:rgba(115,75,252,.16)!important;color:#BCB2FF!important}.trust span{color:var(--mut)} /* filtros */ .fbar{background:rgba(9,9,11,.8)!important} .pill,.chip{background:rgba(255,255,255,.04)!important;border-color:var(--line)!important;color:var(--mut)!important} .pill:hover,.chip:hover{background:var(--hover)!important;border-color:#734BFC!important;color:#D9D4FF!important} .pill.on{background:linear-gradient(135deg,#5C21E0,#734BFC)!important;border-color:transparent!important;color:#fff!important;box-shadow:0 8px 22px -8px rgba(115,75,252,.8)!important} .chip.on{background:rgba(115,75,252,.18)!important;border-color:#734BFC!important;color:#D9D4FF!important} #tool input[type=range]{accent-color:#734BFC}.vt button{background:transparent!important;color:var(--mut)}.vt button.on{background:#5C21E0!important;color:#fff!important} .cnt,.cnt select,.sortb select{color:var(--mut)!important;background:transparent}.cnt select option{background:#111114;color:#fff} /* tarjetas */ .pcard h3,.dom,.pn,.pc-price b{color:#fff} .pcard p,.desc,.faq details p,.step span,.mod p,.db p,.news li span{color:var(--mut)!important} .chips span{background:rgba(255,255,255,.06)!important;color:#c9c3dc!important} .ext{background:rgba(115,75,252,.22)!important;color:#D9D4FF!important;box-shadow:inset 0 0 0 1px rgba(115,75,252,.4)} .b-ok{background:rgba(22,163,74,.14)!important;color:#4ADE80!important}.b-top{background:rgba(245,158,11,.14)!important;color:#FBBF24!important}.b-idn{background:rgba(115,75,252,.18)!important;color:#BCB2FF!important} .tag{background:rgba(115,75,252,.16)!important;color:#BCB2FF!important}.tag.g{background:rgba(22,163,74,.14)!important;color:#4ADE80!important} .pc-foot,.price{background:linear-gradient(90deg,rgba(115,75,252,.07),transparent)!important;border-color:var(--line)!important} .pc-price small,.price small{color:var(--mut)!important} .ib{background:rgba(255,255,255,.05)!important;border-color:var(--line)!important;color:var(--mut)!important}.ib:hover{box-shadow:0 10px 22px -10px rgba(115,75,252,.8)!important;color:#fff!important} .ib.wa{background:#16a34a!important;border-color:#16a34a!important;color:#fff!important}.ib.em{color:#BCB2FF!important}.ib.sv.on{background:rgba(115,75,252,.22)!important;border-color:#734BFC!important;color:#D9D4FF!important}.ib.sv.on svg{fill:#9C87FE} .tile{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 10px 24px -10px rgba(92,33,224,.7)!important} .star{background:rgba(245,158,11,.12)!important;color:#FBBF24!important} /* botones */ .btn{background:transparent!important;border-color:#734BFC!important;color:#BCB2FF!important}.btn:hover{background:var(--hover)!important} .btn.fill{background:linear-gradient(135deg,#5C21E0,#734BFC)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 10px 26px -10px rgba(115,75,252,.9)} .btn.fill:hover{filter:brightness(1.12)} /* secciones */ .step i{background:linear-gradient(135deg,#5C21E0,#6B33F4)!important} .faq details{border-color:var(--line)!important}.faq summary:after{color:#9C87FE} .aviso{background:rgba(245,158,11,.08)!important;box-shadow:inset 0 0 0 1px rgba(245,158,11,.3)!important;color:#FCD34D!important} .demo{background:rgba(115,75,252,.12)!important;color:#D9D4FF!important} .foot{background:#050507!important;border-top:1px solid var(--line)}.foot .fl{border-color:var(--line)!important} /* perfil lateral y noticias */ .cover{background:linear-gradient(120deg,#41189A,#734BFC,#41189A)!important;background-size:200% 100%} .av{border-color:var(--card)!important;background:linear-gradient(135deg,#5C21E0,#6B33F4)!important} .prof{border-color:var(--line)!important}.stat b,.news li em{color:#9C87FE!important}.stat:hover,.news li:hover{background:var(--hover)!important} .sk{background:linear-gradient(100deg,#15151b 30%,#1d1d25 50%,#15151b 70%)!important;background-size:300% 100%} /* cajón y modales */ #dr .pn2,.mod{background:#111114!important;color:var(--txt);box-shadow:-30px 0 80px rgba(0,0,0,.7),0 0 0 1px var(--line)!important} #dr .ov,.modal{background:rgba(3,3,6,.7)!important} .specs div,.seller{background:rgba(255,255,255,.05)!important}.specs small{color:var(--mut)!important}.seller:hover{background:var(--hover)!important}.seller small{color:#9C87FE!important} .big .m{background:rgba(115,75,252,.16)!important;color:#D9D4FF!important}.big .s{background:rgba(255,255,255,.07)!important;color:#c9c3dc!important}.big .w{background:#16a34a!important} .warn2{background:rgba(245,158,11,.08)!important;box-shadow:inset 0 0 0 1px rgba(245,158,11,.28)!important;color:#FCD34D!important} .mod input,.newp textarea,.newp input,.cmts input,.pf-grid input,.pf-grid textarea,.ifil input,.ifil select{background:#09090B!important;border:1.5px solid rgba(255,255,255,.14)!important;color:var(--txt)!important} .mod input:focus,.newp textarea:focus,.newp input:focus,.cmts input:focus,.pf-grid input:focus,.pf-grid textarea:focus{border-color:#734BFC!important;box-shadow:0 0 0 4px rgba(115,75,252,.2)!important;outline:0} .toast{background:#5C21E0;color:#fff} /* comunidad */ .cpost:hover{box-shadow:0 0 0 1px rgba(115,75,252,.5)!important} .vote{background:rgba(255,255,255,.04)!important}.vote button{color:#8b84a3}.vote button:hover{background:rgba(255,255,255,.08)} .vote button.up.on{color:#9C87FE}.vote button.dn.on{color:#3B82F6} .cpost p,.cmt,.idea div{color:#d6d1e6!important}.cmts,.cmt{border-color:var(--line)!important}.cfoot span:hover{background:rgba(255,255,255,.08)} .side h4{background:linear-gradient(120deg,#5C21E0,#734BFC)!important}.side div{color:var(--mut)!important} /* academia, ideas, panel */ .bar{background:rgba(255,255,255,.08)!important}.bar i{background:linear-gradient(90deg,#5C21E0,#9C87FE)!important} .lesson{border-color:var(--line)!important}.lesson:hover{background:var(--hover)!important}.lesson p{color:var(--mut)!important}.lesson .ck{border-color:#4b4563}.lesson.done .ck{background:#5C21E0;border-color:#5C21E0} .pn-menu>a{color:var(--mut)}.pn-menu>a:hover{background:var(--hover);color:#fff}.pn-menu>a.on{color:#D9D4FF;background:rgba(115,75,252,.14);border-left-color:#734BFC} .pm-h,.mrow,.tb td,.tb th{border-color:var(--line)!important}.tb th,.kpi small,.pf-grid label,.hint{color:var(--mut)!important}.kpi b{color:#fff} .sw i{border-color:var(--card)}.sw i.on{box-shadow:0 0 0 2px #fff} /* móvil: la capa del chat ya es oscura */ .dc{background:#0d0d11} /* ===== Tipografía: Plus Jakarta Sans (titulares 700-800 con tracking negativo, cuerpo 400-500) ===== */ body,button,input,select,textarea{font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif!important;font-weight:500} h1,h2,h3,.dom,.pcard h3,.pt,.pro-sec h2,.logo span{font-weight:800;letter-spacing:-.035em} .pc-price b,.kpi b,.kp b,.dprice b,.price b,.stat b{font-variant-numeric:tabular-nums;letter-spacing:-.03em;font-weight:800} /* ===== Botones: gradiente diagonal 500→700, nunca morado plano ===== */ .btn.fill,.pill.on,.step i,.vt button.on{background:var(--action)!important} .btn.fill{box-shadow:0 12px 30px -12px rgba(115,75,252,.9)!important} /* ===== Naranja: SOLO para la acción suprema de la pieza ===== */ .btn.hot{background:linear-gradient(135deg,#F97316,#EA580C)!important;color:#fff!important;border:0!important;box-shadow:0 14px 34px -12px rgba(249,115,22,.85)!important;font-weight:800;padding:12px 24px;font-size:15px} .btn.hot:hover{filter:brightness(1.08);transform:translateY(-2px)} .btn.ghost{border-color:rgba(255,255,255,.16)!important;color:#fff!important} /* ===== Cristal: superficies translúcidas, desenfoque y bordes blancos al 7 % ===== */ .pcard,.box,#tool,.trust div,.step,.faq,.kpi{background:rgba(22,22,24,.72)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.07)} #dr .pn2,.mod{background:rgba(17,17,20,.94)!important;backdrop-filter:blur(18px)} /* ===== Hero estilo Whop: negro, titular gigante centrado y un único CTA naranja ===== */ .hero{text-align:center;padding:64px 24px 40px!important;border:1px solid rgba(255,255,255,.07);background:radial-gradient(ellipse 80% 90% at 50% 125%,rgba(115,75,252,.65),rgba(38,13,104,.35) 45%,transparent 70%),repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 1px,transparent 1px 70px),#0A0A0D!important;box-shadow:0 40px 90px -40px rgba(92,33,224,.75),0 0 0 1px rgba(255,255,255,.06)!important} .hero:before{display:none}.hero:after{background:radial-gradient(circle,rgba(249,115,22,.55),transparent 65%)!important;opacity:.25;right:-40px;bottom:-130px;left:auto} .hero .grid{display:none} .hero h1{font-size:clamp(34px,5.4vw,56px)!important;line-height:1.04!important;letter-spacing:-.045em!important;max-width:760px;margin:0 auto 14px!important} .hero p{margin:0 auto 26px!important;max-width:560px;font-size:16.5px!important;color:#D4D4D8!important;opacity:1!important} .hero .cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:30px;position:relative} .hero .kp{justify-content:center;gap:42px;position:relative}.hero .kp span{color:#A1A1AA!important} /* barras de datos al estilo panel */ .cover{background:linear-gradient(120deg,#41189A,#734BFC,#41189A)!important;background-size:200% 100%} .news li em,.stat b{color:#9C87FE!important} .b-ok{color:#4ADE80!important} /* [bucle 1] Cifras del hero como tarjetas de cristal (estilo panel de Whop) */ .hero .kp{gap:14px!important;margin-top:4px} .hero .kp>div{min-width:150px;padding:14px 22px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(10px);transition:transform .25s,border-color .25s,box-shadow .25s} .hero .kp>div:hover{transform:translateY(-3px);border-color:rgba(115,75,252,.6);box-shadow:0 18px 40px -20px rgba(115,75,252,.8)} .hero .kp b{font-size:34px!important;line-height:1.05;background:linear-gradient(180deg,#fff,#BCB2FF);-webkit-background-clip:text;background-clip:text;color:transparent} .hero .kp span{display:block;margin-top:2px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;font-weight:700} /* [bucle 2] Accesibilidad: anillo de foco visible con teclado, en morado de marca */ :focus{outline:none} :focus-visible{outline:2px solid #9C87FE;outline-offset:2px;border-radius:8px;box-shadow:0 0 0 5px rgba(115,75,252,.28)} .pill:focus-visible,.chip:focus-visible,.btn:focus-visible{border-radius:999px} .ib:focus-visible,.vt button:focus-visible{border-radius:11px} a[onclick],.pill,.chip,.nav a,.pn-menu>a,.ch,.cfoot span,.faq summary{cursor:pointer} /* [bucle 3] Academia estilo Skool: portadas dentro de la paleta, brillo y barra de progreso más fina */ .course{border-radius:18px;overflow:hidden} .course .cimg{position:relative;height:138px;font-size:48px;font-weight:800;letter-spacing:-.04em;overflow:hidden} .course .cimg:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% -10%,rgba(255,255,255,.32),transparent 55%),linear-gradient(180deg,transparent 45%,rgba(9,9,11,.55))} .courses .course:nth-child(1) .cimg{background:linear-gradient(135deg,#734BFC,#5C21E0)!important} .courses .course:nth-child(2) .cimg{background:linear-gradient(135deg,#6B33F4,#41189A)!important} .courses .course:nth-child(3) .cimg{background:linear-gradient(135deg,#9C87FE,#5C21E0)!important} .course .cinfo{padding:16px 18px 18px}.course .cinfo h3{font-size:17px;letter-spacing:-.03em} .course .bar{height:6px;border-radius:99px;margin-top:4px}.course .bar i{border-radius:99px} .course .cinfo small{display:block;margin-top:8px;font-weight:600;font-variant-numeric:tabular-nums} /* [bucle 4] Móvil estilo LinkedIn: barra de pestañas fija abajo con las 5 secciones principales */ @media(max-width:1020px){ body{padding-bottom:76px} .top .nav{display:flex!important;position:fixed;left:0;right:0;bottom:0;margin:0;gap:0;justify-content:space-around;z-index:45;background:rgba(17,17,20,.94);backdrop-filter:blur(16px);border-top:1px solid rgba(255,255,255,.08);padding:6px 4px calc(6px + env(safe-area-inset-bottom))} .top .nav a{flex:1;padding:6px 2px;font-size:10.5px;border-radius:12px} .top .nav a span{display:block!important} .top .nav a:nth-child(5),.top .nav a:nth-child(6),.top .nav a:nth-child(7),.top .nav a[href*="reclamacivil"]{display:none} .top .nav a.on:after{left:30%;right:30%;top:0;bottom:auto} .top .in{gap:10px}.toast{bottom:92px} } /* [bucle 5] Estado vacío: caja con borde discontinuo e icono de búsqueda en morado */ #feed>.box[style*="grid-column"]{text-align:center;padding:54px 24px!important;border:1px dashed rgba(255,255,255,.16)!important;background:rgba(255,255,255,.02)!important;font-size:15px;color:#A1A1AA!important} #feed>.box[style*="grid-column"]:before{content:"";display:block;width:58px;height:58px;margin:0 auto 16px;border-radius:18px;background:rgba(115,75,252,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BCB2FF' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") center/28px no-repeat;box-shadow:inset 0 0 0 1px rgba(115,75,252,.35)} /* [bucle 6] Comunidad estilo Skool: etiqueta de sala en cápsula, títulos más fuertes, votos redondos */ .cpost{border-radius:16px;overflow:hidden;margin-bottom:12px;transition:transform .25s,box-shadow .25s} .cpost:hover{transform:translateY(-2px)} .cpost .cbody{padding:14px 18px} .cpost .cmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:#A1A1AA} .cpost .cmeta b:first-child{background:rgba(115,75,252,.18);color:#D9D4FF;padding:3px 10px;border-radius:99px;font-size:11.5px;letter-spacing:.02em} .cpost h3{font-size:18px;line-height:1.25;color:#fff;margin:6px 0} .cpost .vote{width:54px;padding:12px 0;gap:6px;background:rgba(255,255,255,.03)!important;border-right:1px solid rgba(255,255,255,.06)} .cpost .vote button{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:13px;transition:all .18s} .cpost .vote button:hover{background:rgba(115,75,252,.22)!important;color:#D9D4FF} .cpost .vote button.up.on{background:rgba(115,75,252,.3)!important;color:#fff} .cpost .vote b{font-size:14px;font-variant-numeric:tabular-nums;color:#fff} .cpost .cfoot{margin-top:6px;padding-top:10px;border-top:1px solid rgba(255,255,255,.06)} /* [bucle 7] Perfil y panel estilo LinkedIn: portada con relieve, avatar con aro, indicadores con línea de acento */ #pfbody .cover{height:130px!important;position:relative;background-image:linear-gradient(120deg,rgba(38,13,104,.9),rgba(115,75,252,.85)),repeating-linear-gradient(115deg,rgba(255,255,255,.07) 0 1px,transparent 1px 46px)!important} #pfbody .av{box-shadow:0 0 0 4px #161618,0 0 0 6px rgba(115,75,252,.7),0 16px 36px -10px rgba(92,33,224,.8)!important;letter-spacing:-.04em} #pfbody h2{font-size:28px;letter-spacing:-.04em} #pfbody .kpi{position:relative;overflow:hidden} .kpi:before{content:"";position:absolute;left:0;top:0;right:0;height:2px;background:linear-gradient(90deg,#734BFC,#9C87FE,transparent)} .kpi{position:relative;overflow:hidden;transition:transform .22s,border-color .22s} .kpi:hover{transform:translateY(-3px);border-color:rgba(115,75,252,.5)!important} .pm-h .av3{width:56px;height:56px;font-size:18px;box-shadow:0 0 0 3px #161618,0 0 0 5px rgba(115,75,252,.6)} .pn-menu{border-radius:16px} .mrow{border-radius:12px;padding:12px 10px;transition:background .18s}.mrow:hover{background:rgba(115,75,252,.08)} /* [bucle 8] Chat con la paleta de marca (superficies Kunfupay) en lugar de los grises de Discord */ .dc{background:#0D0D10!important;color:#E4E4E7;border-top:1px solid rgba(255,255,255,.07)} .srv{background:#09090B!important;border-right:1px solid rgba(255,255,255,.06)} .srv i{background:#161618!important;color:#D4D4D8} .srv i:hover,.srv i.on{background:linear-gradient(135deg,#734BFC,#5C21E0)!important;color:#fff;box-shadow:0 10px 24px -10px rgba(115,75,252,.9)} .chl{background:#111114!important;border-right:1px solid rgba(255,255,255,.06)} .chl h5{border-bottom:1px solid rgba(255,255,255,.07)!important} .ch{color:#A1A1AA!important}.ch:hover{background:rgba(115,75,252,.10)!important;color:#fff!important}.ch.on{background:rgba(115,75,252,.20)!important;color:#fff!important;box-shadow:inset 3px 0 0 #734BFC} .me{background:#0C0C0F!important}.me .av2{background:linear-gradient(135deg,#734BFC,#5C21E0)!important} .chat header{border-bottom:1px solid rgba(255,255,255,.07)!important} .m .av2{background:linear-gradient(135deg,#734BFC,#5C21E0)!important}.m.b .av2{background:linear-gradient(135deg,#9C87FE,#6B33F4)!important} .m time,.chl .grp{color:#71717A!important} .m:hover{background:rgba(255,255,255,.025);border-radius:10px} .comp{background:#161618!important;border:1px solid rgba(255,255,255,.08);border-radius:14px!important} .comp:focus-within{border-color:#734BFC!important;box-shadow:0 0 0 4px rgba(115,75,252,.2)} .comp input{color:#FAFAFA!important}.comp button{color:#BCB2FF!important}.comp button:hover{color:#fff!important} /* [bucle 9] Contraste AA: hora de mensajes y títulos de grupo del chat (antes 4,02:1) */ .m time,.chl .grp{color:#9A9AA6!important} /* [bucle 10] Ideas: tarjetas con acento morado, número en cápsula, filtros y paginador con la paleta */ .idea{position:relative;padding:16px 18px 16px 22px!important;border-radius:16px;transition:transform .22s,box-shadow .22s} .idea:before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 4px 4px 0;background:linear-gradient(180deg,#734BFC,#5C21E0)} .idea:hover{transform:translateY(-2px);box-shadow:var(--sh2)!important} .idea>small:first-child{display:inline-block;background:rgba(115,75,252,.16);color:#D9D4FF!important;border-radius:99px;padding:3px 10px;font-weight:700;font-size:11.5px;letter-spacing:.02em} .idea h4{font-size:17px;letter-spacing:-.03em;margin:8px 0 4px;color:#fff} .idea .cp{display:flex;gap:8px;margin-top:12px} .ifil{position:sticky;top:60px;z-index:8;background:rgba(9,9,11,.85);backdrop-filter:blur(10px);padding:10px 0;margin-bottom:10px} .ifil input,.ifil select{border-radius:12px!important;padding:11px 14px!important} #icount{font-weight:700;color:#BCB2FF!important;font-variant-numeric:tabular-nums} .pager{gap:14px}.pager span{font-weight:700;color:#A1A1AA;font-variant-numeric:tabular-nums} /* [bucle 11] Estado "scrolled" de la barra superior */ .top{transition:background .25s,box-shadow .25s,border-color .25s} .top.scrolled{background:rgba(9,9,11,.9)!important;border-bottom-color:rgba(115,75,252,.35)!important;box-shadow:0 12px 30px -18px rgba(92,33,224,.7)!important} /* [bucle 12] Cajón de detalle: botones de contacto fijos arriba al desplazarse, cierre más claro */ #drc .db .big{position:sticky;top:0;z-index:4;margin:0 -24px 12px;padding:12px 24px;background:rgba(17,17,20,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.07)} #drc .db .big a,#drc .db .big button{padding:13px 10px;border-radius:12px;font-weight:800;letter-spacing:-.01em;transition:transform .18s,filter .18s} #drc .db .big a:hover,#drc .db .big button:hover{transform:translateY(-2px);filter:brightness(1.12)} #drc .dh .x{width:36px;height:36px;border-radius:12px;background:rgba(9,9,11,.45)!important;border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px);transition:background .18s} #drc .dh .x:hover{background:rgba(9,9,11,.75)!important} #drc .dh h2{font-size:28px;letter-spacing:-.04em} /* [bucle 13] Móvil: el ecosistema ReclamaCivil traía 4 columnas fijas en línea que desbordaban la pantalla */ .pro-sec .steps{grid-template-columns:repeat(4,minmax(0,1fr))!important} .step{min-width:0;overflow-wrap:anywhere} @media(max-width:900px){.pro-sec .steps{grid-template-columns:repeat(2,minmax(0,1fr))!important}} @media(max-width:520px){.pro-sec .steps{grid-template-columns:minmax(0,1fr)!important}.hero .kp>div{min-width:0;flex:1 1 40%}.hero .kp{gap:10px!important}} html,body{overflow-x:hidden} /* [bucle 14] Tarjetas de anuncio: elevación suave y borde morado al pasar el ratón (respeta reduced-motion) */ .pcard{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease} .pcard:hover{transform:translateY(-3px);border-color:rgba(115,75,252,.55)!important;box-shadow:0 14px 34px rgba(92,33,224,.22)} @media(prefers-reduced-motion:reduce){.pcard{transition:none}.pcard:hover{transform:none}} /* [bucle 15] Botones: pulsación con ligera compresión y transición uniforme */ .btn{transition:transform .12s ease,filter .15s ease,box-shadow .15s ease} .btn:active{transform:scale(.97)} @media(prefers-reduced-motion:reduce){.btn{transition:none}.btn:active{transform:none}} /* [bucle 16] Selección de texto con la marca y barra de scroll discreta */ ::selection{background:rgba(115,75,252,.45);color:#fff} html{scrollbar-color:#2A2A33 #09090B;scrollbar-width:thin} /* [bucle 17] Inputs y selects: borde/halo morado al enfocar y placeholder legible */ input:focus,select:focus,textarea:focus{border-color:#734BFC!important;box-shadow:0 0 0 3px rgba(115,75,252,.25)!important;outline:none} input::placeholder,textarea::placeholder{color:#8A8A98!important} /* [bucle 18] Enlaces de texto: subrayado animado discreto en el pie y párrafos */ footer a,.pro-sec p a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .2s ease} footer a:hover,.pro-sec p a:hover{background-size:100% 1px} @media(prefers-reduced-motion:reduce){footer a,.pro-sec p a{transition:none}} /* [bucle 19] Corrección del #18: el pie real usa .foot, no