/* Theme Name: GuiaMania 25 Theme URI: https://guiamania.com/ Description: Rediseno de GuiaMania. Concepto "Consola": el sitio funciona como la pantalla de arranque de una consola de trucos. Color = plataforma. Author: GuiaMania Version: 1.0 */ /* ===================================================================== 0. RESET (integra el reset.css original + las etiquetas gm*) ================================================================== */ html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address, cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol, ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td, gmarticulo,aside,canvas,details,figcaption,figure,footer,gmmain,hgroup,menu,nav, gmcategoria,summary,time,mark,audio,video{ margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent; } gmarticulo,aside,details,figcaption,figure,footer,gmmain,hgroup,menu,nav,gmcategoria{display:block;} nav ul{list-style:none;} blockquote,q{quotes:none;} blockquote:before,blockquote:after,q:before,q:after{content:none;} table{border-collapse:collapse;border-spacing:0;} input,select,textarea,button{font:inherit;color:inherit;} img{max-width:100%;height:auto;display:block;} *,*::before,*::after{box-sizing:border-box;} /* ===================================================================== 1. TOKENS -------------------------------------------------------------------- La paleta sale de la cabecera historica del sitio: azul noche -> carmin -> brasa dorada. --accent es una variable que CAMBIA segun la consola del articulo (ver bloque 2). El color aca es informacion, no adorno. ================================================================== */ :root{ --void:#0A0C14; --void-2:#0E1220; --panel:#141A2B; --panel-2:#1B2237; --line:#242C45; --line-soft:rgba(255,255,255,.07); --paper:#ECF1FF; --mist:#93A0C2; --mist-2:#6C789A; --plasma:#E5174F; --ember:#FF9A1F; --gold:#FFC53D; /* acento por defecto = identidad GuiaMania */ --accent:#E5174F; --accent-2:#FF9A1F; --accent-ink:#fff; --brand:linear-gradient(104deg,#0F1730 0%,#4E0E3B 30%,#B41F42 58%,#EF7A22 82%,#FFC53D 100%); --r-s:8px; --r-m:14px; --r-l:22px; --max:1220px; --gap:clamp(16px,2.4vw,28px); --shadow:0 18px 40px -22px rgba(0,0,0,.9); --ff-display:"Chakra Petch","Segoe UI",Roboto,system-ui,sans-serif; --ff-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --ff-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } /* ===================================================================== 2. ACENTOS POR PLATAFORMA Se aplican en desde gm_body_class(). ================================================================== */ .p-ps {--accent:#2E7DFF;--accent-2:#7FC4FF;--accent-ink:#04101f;} .p-xbox {--accent:#5BD745;--accent-2:#B8FFA6;--accent-ink:#04150a;} .p-nin {--accent:#FF3D3D;--accent-2:#00D6E6;--accent-ink:#fff;} .p-pc {--accent:#8C9BFF;--accent-2:#CBD4FF;--accent-ink:#0a0d1f;} .p-mob {--accent:#22D3A5;--accent-2:#9BFFE4;--accent-ink:#03150f;} .p-retro {--accent:#B46BFF;--accent-2:#E3C2FF;--accent-ink:#fff;} .p-guia {--accent:#FFC53D;--accent-2:#FFE9A8;--accent-ink:#1a1200;} .p-multi {--accent:#E5174F;--accent-2:#FF9A1F;--accent-ink:#fff;} /* ===================================================================== 3. BASE ================================================================== */ body{ font-family:var(--ff-body); background:var(--void); color:var(--paper); font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* textura de fondo: trama de triangulos muy tenue (guino a Tetris) */ body::before{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05; background: linear-gradient(135deg,transparent 49.5%,var(--accent) 49.5% 50.5%,transparent 50.5%) 0 0/64px 64px, linear-gradient(45deg,transparent 49.5%,#3d4a7a 49.5% 50.5%,transparent 50.5%) 32px 32px/64px 64px; transition:opacity .4s; } #max{position:relative;z-index:1;} a{color:var(--accent-2);text-decoration:none;} a:hover{color:var(--paper);} h1,h2,h3,h4,h5,.display{font-family:var(--ff-display);font-weight:700;line-height:1.12;letter-spacing:-.01em;} strong,b{font-weight:700;color:#fff;} :focus-visible{outline:3px solid var(--accent-2);outline-offset:3px;border-radius:4px;} ::selection{background:var(--accent);color:#fff;} .gm-wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 20px;} .clear{clear:both;height:0;overflow:hidden;} /* etiqueta pequena de seccion (eyebrow) */ .gm-eyebrow{ font-family:var(--ff-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase; color:var(--mist-2);display:flex;align-items:center;gap:10px;margin-bottom:6px; } .gm-eyebrow::before{content:"";width:22px;height:2px;background:var(--accent);} .gm-seccion{padding:clamp(40px,5vw,72px) 0 0;} .gm-seccion-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px;flex-wrap:wrap;} .gm-seccion-head h2,.gm-seccion-head h3{font-size:clamp(24px,3.4vw,34px);} .gm-seccion-head .gm-link{ font-family:var(--ff-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase; color:var(--mist);border-bottom:1px solid var(--line);padding-bottom:3px; } .gm-seccion-head .gm-link:hover{color:var(--accent-2);border-color:var(--accent);} /* ===================================================================== 4. CABECERA / NAVEGACION ================================================================== */ #estilo-menu-guiamania{ position:sticky;top:0;z-index:60; background:rgba(10,12,20,.82); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--line-soft); } #estilo-menu-guiamania::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--brand);opacity:.9; } .recuadro{ max-width:var(--max);margin:0 auto;padding:0 20px;height:62px; display:flex;align-items:center;gap:18px; } .logo-guiamania img{height:26px;width:auto;} .logo-guiamania a{display:flex;align-items:center;} /* barra de consolas: color = plataforma */ .gm-consolas{display:flex;gap:4px;margin-left:auto;overflow:auto;scrollbar-width:none;} .gm-consolas::-webkit-scrollbar{display:none;} .gm-consolas a{ font-family:var(--ff-display);font-weight:600;font-size:13px;letter-spacing:.02em; color:var(--mist);padding:8px 11px;border-radius:var(--r-s);white-space:nowrap; border:1px solid transparent;transition:.16s; } .gm-consolas a:hover{color:#fff;background:var(--panel);border-color:var(--line);} .gm-consolas a[data-c="ps"]:hover {color:#7FC4FF;box-shadow:inset 0 -2px 0 #2E7DFF;} .gm-consolas a[data-c="xbox"]:hover{color:#B8FFA6;box-shadow:inset 0 -2px 0 #5BD745;} .gm-consolas a[data-c="nin"]:hover {color:#FFB4B4;box-shadow:inset 0 -2px 0 #FF3D3D;} .gm-consolas a[data-c="pc"]:hover {color:#CBD4FF;box-shadow:inset 0 -2px 0 #8C9BFF;} .gm-consolas a[data-c="mob"]:hover {color:#9BFFE4;box-shadow:inset 0 -2px 0 #22D3A5;} .gm-busca-top{ display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line); border-radius:999px;padding:6px 8px 6px 14px; } .gm-busca-top input[type=text]{ background:none;border:0;width:150px;font-size:14px;color:var(--paper); } .gm-busca-top input[type=text]::placeholder{color:var(--mist-2);} .gm-busca-top input[type=submit]{ background:var(--accent);color:var(--accent-ink);border:0;border-radius:999px; padding:5px 12px;font-family:var(--ff-mono);font-size:11px;letter-spacing:.1em;cursor:pointer; } .gm-busca-top input[type=submit]:hover{filter:brightness(1.15);} .abre-nav{ display:none;flex-direction:column;gap:5px;cursor:pointer;padding:10px;margin-left:auto; background:none;border:0; } .abre-nav i{display:block;width:22px;height:2px;background:var(--paper);border-radius:2px;transition:transform .2s,opacity .2s;} .cierrax{display:none;} /* El menú desplegable está OCULTO por defecto y solo existe en móvil. Sin esta regla, en escritorio se renderizaba como una lista normal dentro de la barra flex y los enlaces se desbordaban fuera de los 62px de alto. */ #estilo-menumenu{display:none;} /* Fondo oscuro detrás del menú abierto. */ #gm-nav-fondo{ display:none;position:fixed;inset:0;z-index:90; background:rgba(5,7,14,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px); } body.nav-abierta #gm-nav-fondo{display:block;} body.nav-abierta{overflow:hidden;} @media (max-width:1080px){ .gm-consolas{display:none;} .abre-nav{display:flex;} .gm-busca-top{display:none;} /* z-index 100: por encima de la cabecera (60) y del fondo (90). El