/* =========================================================
juegosporno.us — capa visual moderna (ago-2026)
Fichero independiente: para revertir, basta con quitar el
enqueue 'jp-moderno' de functions.php.
========================================================= */
:root{
--jp-fondo:#0F1116;
--jp-sup:#171A21;
--jp-sup2:#1F242E;
--jp-borde:#2A313D;
--jp-texto:#E9ECF2;
--jp-tenue:#98A1B0;
--jp-rojo:#FF2B44;
--jp-rojo-osc:#C4132A;
--jp-radio:10px;
--jp-sombra:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
}
/* ---------- base ---------- */
body{
background:var(--jp-fondo) !important;
background-image:none !important;
color:var(--jp-texto);
font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
-webkit-font-smoothing:antialiased;
}
#main,#content,.loop-content,.nag,#footer,#wrapper{background:transparent !important}
a{color:var(--jp-texto)}
a:hover{color:var(--jp-rojo)}
/* Contenedor mas ancho en pantallas grandes */
.wrap{max-width:1280px !important;width:auto !important;padding-left:20px;padding-right:20px;margin:0 auto}
@media (max-width:1100px){ .wrap{padding-left:14px;padding-right:14px} }
/* ---------- cabecera ---------- */
#header{
background:linear-gradient(180deg,#1A0308 0%,#120306 100%) !important;
border-bottom:1px solid var(--jp-borde);
box-shadow:none !important;
}
#head-title a,#head-title{
text-shadow:none !important;
letter-spacing:-.02em;
}
#headlogo img{filter:drop-shadow(0 2px 10px rgba(255,43,68,.28))}
/* Buscador */
#header input[type="text"],#header input[type="search"],.searchform input[type="text"]{
background:var(--jp-sup2) !important;
border:1px solid var(--jp-borde) !important;
color:var(--jp-texto) !important;
border-radius:8px 0 0 8px !important;
padding:10px 14px !important;
box-shadow:none !important;
}
#header input[type="text"]::placeholder{color:var(--jp-tenue)}
#header input[type="text"]:focus,.searchform input[type="text"]:focus{
outline:2px solid var(--jp-rojo);outline-offset:-1px;border-color:var(--jp-rojo) !important;
}
.searchform input[type="submit"],#header button{
background:var(--jp-rojo) !important;border:0 !important;border-radius:0 8px 8px 0 !important;
}
/* ---------- menu superior ---------- */
.menu,#access,.main-nav{
background:var(--jp-sup) !important;
border-bottom:1px solid var(--jp-borde);
}
.menu li a,#access li a{
color:var(--jp-texto) !important;
font-weight:600;letter-spacing:.01em;
border:0 !important;
transition:background .15s ease,color .15s ease;
}
.menu li a:hover,#access li a:hover{background:var(--jp-sup2) !important;color:var(--jp-rojo) !important}
/* ---------- titulos de seccion ---------- */
.loop-header,.loop-title,h1.loop-title,.box-title,.section-title{
color:var(--jp-texto) !important;
border:0 !important;
text-shadow:none !important;
}
h1.loop-title,.loop-title{
font-size:clamp(1.4rem,3.2vw,2rem);
font-weight:700;letter-spacing:-.02em;margin:0 0 4px;
}
.loop-header{border-bottom:1px solid var(--jp-borde) !important;padding-bottom:14px;margin-bottom:22px}
.box-title,.section-title{
font-size:1.05rem;font-weight:700;text-transform:none;
padding:0 0 10px;margin:28px 0 16px;border-bottom:1px solid var(--jp-borde) !important;
}
/* ---------- rejilla de juegos ---------- */
.loop-content .nag{
display:grid !important;
grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
gap:22px 18px;
float:none !important;
}
.loop-content .item,.nag .item{
width:auto !important;margin:0 !important;float:none !important;
background:transparent;
}
.item .thumb{
position:relative;border-radius:var(--jp-radio);overflow:hidden;
background:var(--jp-sup2);border:1px solid var(--jp-borde);
aspect-ratio:4/3;
transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.item .thumb a.clip-link,.item .thumb .clip{display:block;width:100%;height:100%}
.item .thumb img{
width:100% !important;height:100% !important;object-fit:cover;display:block;
transition:transform .3s ease;
}
.item:hover .thumb{
transform:translateY(-3px);
box-shadow:var(--jp-sombra);
border-color:var(--jp-rojo);
}
.item:hover .thumb img{transform:scale(1.06)}
/* Distintivo de "jugar" al pasar por encima */
.item .thumb::after{
content:"▶";
position:absolute;inset:0;margin:auto;
width:52px;height:52px;line-height:52px;text-align:center;
border-radius:50%;background:rgba(255,43,68,.92);color:#fff;
font-size:18px;padding-left:3px;box-sizing:border-box;
opacity:0;transform:scale(.8);transition:opacity .18s ease,transform .18s ease;
pointer-events:none;
}
.item:hover .thumb::after{opacity:1;transform:scale(1)}
.item .overlay{display:none !important}
.item .data{padding:10px 2px 0}
.item .title,.item h3.title{
margin:0;font-size:.92rem;line-height:1.35;font-weight:600;
}
.item .title a{
color:var(--jp-texto);text-decoration:none;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.item .title a:hover{color:var(--jp-rojo)}
/* ---------- bloque Explora ---------- */
.jp-explora{
background:var(--jp-sup);
border:1px solid var(--jp-borde);
border-radius:14px;
padding:20px 22px;
margin:0 0 26px;
}
.jp-explora-titulo{
margin:0 0 16px;font-size:1rem;font-weight:700;color:var(--jp-texto);
letter-spacing:.01em;border:0 !important;padding:0 !important;
}
.jp-explora-grupo{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.jp-explora-grupo:last-child{margin-bottom:0}
.jp-explora-et{
flex:0 0 108px;padding-top:6px;
font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;
color:var(--jp-tenue);font-weight:700;
}
.jp-explora-lista{
list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px;flex:1 1 auto;
}
.jp-explora-lista li{margin:0;padding:0;list-style:none}
.jp-explora-lista a{
display:inline-flex;align-items:baseline;gap:6px;
padding:6px 11px;border-radius:999px;
background:var(--jp-sup2);border:1px solid var(--jp-borde);
color:var(--jp-texto);text-decoration:none;
font-size:.845rem;line-height:1.2;
transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.jp-explora-lista a:hover{background:var(--jp-rojo-osc);border-color:var(--jp-rojo);color:#fff}
.jp-explora-lista a.es-actual{background:var(--jp-rojo);border-color:var(--jp-rojo);color:#fff}
.jp-explora-lista em{
font-style:normal;font-size:.74rem;color:var(--jp-tenue);
font-variant-numeric:tabular-nums;
}
.jp-explora-lista a:hover em,.jp-explora-lista a.es-actual em{color:rgba(255,255,255,.8)}
@media (max-width:760px){
.jp-explora{padding:16px 14px;border-radius:12px}
.jp-explora-grupo{flex-direction:column;gap:8px}
.jp-explora-et{flex:none;padding-top:0}
}
/* ---------- ficha de juego ---------- */
.single .entry-content,.single #content{color:var(--jp-texto)}
.single .entry-content p{line-height:1.7;color:#C7CDD8}
iframe{max-width:100%;border-radius:var(--jp-radio);border:1px solid var(--jp-borde);background:#000}
/* ---------- paginacion ---------- */
.loop-nav a,.pagination a,.pagination span,.page-numbers{
background:var(--jp-sup2) !important;border:1px solid var(--jp-borde) !important;
color:var(--jp-texto) !important;border-radius:8px !important;
padding:8px 13px !important;margin:0 3px !important;text-decoration:none;
transition:background .15s ease,border-color .15s ease;
}
.loop-nav a:hover,.pagination a:hover,.page-numbers:hover{
background:var(--jp-rojo-osc) !important;border-color:var(--jp-rojo) !important;color:#fff !important;
}
.page-numbers.current{background:var(--jp-rojo) !important;border-color:var(--jp-rojo) !important;color:#fff !important}
/* ---------- pie ---------- */
#footer,#footer .wrap{
background:var(--jp-sup) !important;
border-top:1px solid var(--jp-borde);
color:var(--jp-tenue);
}
#footer a{color:var(--jp-tenue)}
#footer a:hover{color:var(--jp-rojo)}
/* ---------- accesibilidad ---------- */
a:focus-visible,button:focus-visible,input:focus-visible{
outline:2px solid var(--jp-rojo);outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
*{animation:none !important;transition:none !important}
.item:hover .thumb{transform:none}
.item:hover .thumb img{transform:none}
}
/* ---------- movil ---------- */
@media (max-width:640px){
.loop-content .nag{grid-template-columns:repeat(2,1fr);gap:16px 12px}
.item .title,.item h3.title{font-size:.82rem}
.item .thumb::after{width:42px;height:42px;line-height:42px;font-size:15px}
}
/* =========================================================
CORRECCION miniaturas: el tema posiciona .clip-link y .clip
en absolute; combinado con aspect-ratio recortaba la imagen
a la esquina superior izquierda. Se devuelve todo al flujo
normal y la altura la marca la propia imagen (4:3).
========================================================= */
.item .thumb{
aspect-ratio:auto !important;
height:auto !important;
width:100% !important;
display:block !important;
position:relative !important;
overflow:hidden;
line-height:0;
}
.item .thumb a.clip-link,
.item .thumb .clip{
position:static !important;
display:block !important;
width:100% !important;
height:auto !important;
inset:auto !important;
transform:none !important;
}
.item .thumb .vertical-align,
.item .thumb .overlay{display:none !important}
.item .thumb img{
position:static !important;
display:block !important;
width:100% !important;
height:auto !important;
max-width:100% !important;
min-height:0 !important;
object-fit:fill !important;
margin:0 !important;
aspect-ratio:4/3;
}
/* =========================================================
v2 — correcciones y ampliacion
========================================================= */
/* ---- 1. La celda fantasma: el clearfix .cf del tema mete
::before/::after y dentro de un grid cuentan como celda ---- */
.loop-content .nag::before,
.loop-content .nag::after{ content:none !important; display:none !important; }
.loop-content .nag{ margin-left:0 !important; margin-right:0 !important; }
/* ---- 2. Titulos de las fichas: el tema los pinta casi negros ---- */
.loop-content .item .data .title a,
.loop-content .item h3.title a,
.item .title a:link,
.item .title a:visited{ color:#E9ECF2 !important; }
.loop-content .item .data .title a:hover,
.item .title a:hover{ color:var(--jp-rojo) !important; }
/* ---- 3. Buscador de cabecera ---- */
#header .searchform{ display:flex; align-items:stretch; }
#header .search-text-div{ flex:1 1 auto; display:flex; }
#header .searchform input[type="text"],
#header .searchform .search-text{
flex:1 1 auto; min-width:0;
border-radius:9px 0 0 9px !important;
}
#header .searchform button,
#header .searchform input[type="submit"],
#header .btn-toggle-search{
width:auto !important; height:auto !important;
min-width:48px !important; min-height:42px !important;
display:inline-flex !important; align-items:center; justify-content:center;
background:var(--jp-rojo) !important; color:#fff !important;
border:0 !important; border-radius:0 9px 9px 0 !important;
cursor:pointer; font-size:0; line-height:0; padding:0 12px !important;
transition:background .15s ease;
}
#header .searchform button:hover,
#header .btn-toggle-search:hover{ background:#E01834 !important; }
/* Lupa dibujada por CSS: el icono original se perdio */
#header .searchform button::before,
#header .btn-toggle-search::before{
content:""; width:17px; height:17px; display:block;
background:currentColor;
-webkit-mask:no-repeat center/contain url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E");
mask:no-repeat center/contain url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E");
}
#header .searchform button svg,
#header .btn-toggle-search svg,
#header .btn-toggle-search i{ display:none !important; }
/* ---- 4. Dos columnas: contenido + barra lateral ---- */
@media (min-width:1000px){
#content{
display:grid !important;
grid-template-columns:minmax(0,1fr) 300px;
gap:0 26px;
align-items:start;
float:none !important;
width:100% !important;
}
#content > *{ grid-column:1; min-width:0; }
#content > .jp-lateral{ grid-column:2; grid-row:1 / span 999; }
}
.jp-lateral{ display:flex; flex-direction:column; gap:18px; }
@media (min-width:1000px){
.jp-lateral{ position:sticky; top:16px; }
}
@media (max-width:999px){
.jp-lateral{ margin:26px 0 0; }
}
.jp-lat-titulo{
margin:0 0 10px; font-size:.74rem; font-weight:700; letter-spacing:.1em;
text-transform:uppercase; color:var(--jp-tenue);
}
.jp-lat-widget{ max-width:100%; }
.jp-lat-widget img{ max-width:100%; height:auto; border-radius:10px; }
.jp-lat-hueco{
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
min-height:250px; border:1px dashed var(--jp-borde); border-radius:12px;
background:var(--jp-sup); color:var(--jp-tenue);
}
.jp-lat-hueco.jp-lat-alto{ min-height:600px; }
.jp-lat-hueco span{ font-size:1.05rem; font-weight:700; color:#6E7889; letter-spacing:.02em; }
.jp-lat-hueco small{ font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; }
.jp-lat-aviso{
margin:0; font-size:.76rem; line-height:1.5; color:var(--jp-tenue);
background:var(--jp-sup); border:1px solid var(--jp-borde);
border-radius:10px; padding:10px 12px;
}
.jp-lat-aviso a{ color:var(--jp-rojo); }
/* ---- 5. Barra de etiquetas del tema (#middle-nav) ---- */
#middle-nav{ margin:0 0 18px; }
#middle-nav .menu{
display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0;
background:transparent !important; border:0 !important;
}
#middle-nav .menu li{ margin:0; }
#middle-nav .menu li a{
display:block; padding:8px 14px; border-radius:8px;
background:var(--jp-sup2) !important; border:1px solid var(--jp-borde);
color:var(--jp-texto) !important; font-size:.85rem; font-weight:600;
text-decoration:none;
}
#middle-nav .menu li a:hover{ background:var(--jp-rojo) !important; border-color:var(--jp-rojo); color:#fff !important; }
/* ---- 6. Paginacion ---- */
.loop-nav,.loop-nav.pag-nav{ margin:30px 0 10px; }
.loop-nav-inner{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.loop-nav .prev,.loop-nav .next{ display:inline-flex; }
.loop-nav a,.loop-nav .prev a,.loop-nav .next a{
display:inline-flex !important; align-items:center; gap:9px;
width:auto !important; min-width:150px; justify-content:center;
padding:11px 22px !important; border-radius:10px !important;
background:var(--jp-sup2) !important; border:1px solid var(--jp-borde) !important;
color:var(--jp-texto) !important; font-weight:600; text-decoration:none;
}
.loop-nav a:hover{ background:var(--jp-rojo) !important; border-color:var(--jp-rojo) !important; color:#fff !important; }
.loop-nav svg{ width:1em; height:1em; fill:currentColor; }
/* ---- 7. Contraste general: nada de texto casi negro sobre oscuro ---- */
#main p,#main li,#main span,#main div,
#footer p,#footer li{ color:inherit; }
#main h1,#main h2,#main h3,#main h4{ color:var(--jp-texto); }
#main .entry-content,#main .entry-content p,
#main .seo-text,#main .seo-text p,
.home-intro,.home-intro p,.homepage-description,.homepage-description p{
color:#C2C9D4 !important;
}
#main a:not(.jp-explora-lista a):not(.loop-nav a):not(.item .title a){ color:#D8DEE8; }
#main a:not(.jp-explora-lista a):hover{ color:var(--jp-rojo); }
/* ---- 8. Menu movil ---- */
.jp-burger,.jp-panel,.jp-velo{ display:none; }
@media (max-width:999px){
.jp-burger{
display:flex !important; flex-direction:column; justify-content:center; gap:5px;
position:fixed; top:12px; right:12px; z-index:9998;
width:46px; height:46px; padding:0 11px;
border:1px solid var(--jp-borde); border-radius:12px;
background:rgba(23,26,33,.94); backdrop-filter:blur(8px); cursor:pointer;
}
.admin-bar .jp-burger{ top:58px; }
.jp-burger span{
display:block; height:2px; width:100%; border-radius:2px; background:var(--jp-texto);
transition:transform .22s ease,opacity .18s ease;
}
body.jp-abierto .jp-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.jp-abierto .jp-burger span:nth-child(2){ opacity:0; }
body.jp-abierto .jp-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.jp-velo{
display:block !important; position:fixed; inset:0; z-index:9996;
background:rgba(0,0,0,.6); opacity:0; transition:opacity .25s ease;
}
body.jp-abierto .jp-velo{ opacity:1; }
.jp-panel{
display:flex !important; flex-direction:column;
position:fixed; top:0; right:0; bottom:0; z-index:9997;
width:min(86vw,340px); padding:16px 16px 28px;
background:var(--jp-sup); border-left:1px solid var(--jp-borde);
transform:translateX(100%); transition:transform .26s cubic-bezier(.4,0,.2,1);
overflow-y:auto; overscroll-behavior:contain;
}
body.jp-abierto .jp-panel{ transform:translateX(0); }
.jp-panel[hidden],.jp-velo[hidden]{ display:none !important; }
.jp-panel-cab{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.jp-panel-marca{ font-weight:700; font-size:.95rem; letter-spacing:-.01em; color:var(--jp-texto); }
.jp-cerrar{
background:none; border:0; color:var(--jp-tenue); font-size:30px; line-height:1;
cursor:pointer; padding:0 4px;
}
.jp-cerrar:hover{ color:var(--jp-rojo); }
.jp-panel-buscar{ display:flex; margin-bottom:18px; }
.jp-panel-buscar input{
flex:1 1 auto; min-width:0; padding:10px 13px;
background:var(--jp-sup2); border:1px solid var(--jp-borde); border-right:0;
border-radius:9px 0 0 9px; color:var(--jp-texto); font-size:.9rem;
}
.jp-panel-buscar input::placeholder{ color:var(--jp-tenue); }
.jp-panel-buscar button{
display:flex; align-items:center; justify-content:center; width:46px;
background:var(--jp-rojo); border:0; border-radius:0 9px 9px 0; color:#fff; cursor:pointer;
}
.jp-panel-et{
margin:0 0 9px; font-size:.7rem; font-weight:700; letter-spacing:.11em;
text-transform:uppercase; color:var(--jp-tenue);
}
.jp-panel-lista{ list-style:none; margin:0 0 20px; padding:0; }
.jp-panel-lista li{ margin:0; }
.jp-panel-lista a{
display:flex; align-items:center; justify-content:space-between; gap:10px;
padding:11px 12px; border-radius:9px;
color:var(--jp-texto); text-decoration:none; font-size:.92rem; font-weight:500;
}
.jp-panel-lista a:hover,.jp-panel-lista a:focus-visible{ background:var(--jp-sup2); color:var(--jp-rojo); }
.jp-panel-lista em{
font-style:normal; font-size:.74rem; color:var(--jp-tenue);
background:var(--jp-sup2); border-radius:999px; padding:2px 8px;
font-variant-numeric:tabular-nums;
}
.jp-panel-extra a{ font-size:.86rem; color:var(--jp-tenue); }
/* El menu de escritorio estorba en movil */
#header .menu,#middle-nav{ display:none !important; }
#header .wrap{ padding-right:70px; }
}
@media (prefers-reduced-motion:reduce){
.jp-panel,.jp-velo,.jp-burger span{ transition:none !important; }
}
/* ---- 9. Retoques finos ---- */
.item .data{ padding:9px 1px 0; }
.loop-content .nag{ gap:24px 18px; }
@media (min-width:1000px){
.loop-content .nag{ grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); }
}
#footer{ margin-top:36px; padding:22px 0; }
/* =========================================================
v3 — limpieza de cabecera y ajustes de movil
========================================================= */
/* Franja blanca degradada bajo la cabecera (.cat-featured usaba bg-grad.png) */
.cat-featured{ background:none !important; padding-top:0 !important; }
.cat-ad:empty{ display:none !important; }
/* Trama de puntos heredada en la paginacion */
.loop-nav,.loop-nav.pag-nav{ background:none !important; }
/* Barra "Navigate to..." del tema: no aporta nada, la sustituye el hamburguesa */
#main-nav{ display:none !important; }
@media (max-width:999px){
/* En movil las categorias viven en el menu hamburguesa */
.jp-explora{ display:none !important; }
/* Sin publicidad lateral en movil */
.jp-lateral{ display:none !important; }
}
/* Trama de puntos heredada en el carrusel de portada */
.carousel,.fcarousel,.carousel-games{ background-image:none !important; }
/* ---- Carrusel de portada con scroll-snap nativo (sin jcarousel) ---- */
.carousel-container{ position:relative; }
.carousel-list{
display:flex !important; gap:14px; list-style:none; margin:0 !important; padding:2px 0 10px !important;
overflow-x:auto; overflow-y:hidden;
scroll-snap-type:x mandatory; scroll-behavior:smooth;
-webkit-overflow-scrolling:touch; scrollbar-width:thin;
scrollbar-color:var(--jp-borde) transparent;
width:auto !important; height:auto !important; position:static !important; left:auto !important;
}
.carousel-list::-webkit-scrollbar{ height:8px; }
.carousel-list::-webkit-scrollbar-thumb{ background:var(--jp-borde); border-radius:99px; }
.carousel-list::-webkit-scrollbar-track{ background:transparent; }
.carousel-list li{
flex:0 0 auto; width:180px; margin:0 !important; float:none !important;
scroll-snap-align:start; border:0 !important; background:transparent !important;
}
.carousel-list li .thumb{ width:100% !important; }
.carousel-games{ width:auto !important; overflow:visible !important; position:static !important; }
.fcarousel .carousel-prev,.fcarousel .carousel-next{
background:var(--jp-sup2) !important; border:1px solid var(--jp-borde) !important;
border-radius:10px !important; width:34px !important; height:44px !important;
top:50% !important; margin-top:-4px !important; opacity:.92; cursor:pointer;
display:flex !important; align-items:center; justify-content:center; font-size:0;
}
.fcarousel .carousel-prev:hover,.fcarousel .carousel-next:hover{
background:var(--jp-rojo) !important; border-color:var(--jp-rojo) !important;
}
.fcarousel .carousel-prev::after,.fcarousel .carousel-next::after{
content:""; width:9px; height:9px; border-top:2px solid #fff; border-right:2px solid #fff;
}
.fcarousel .carousel-prev::after{ transform:rotate(-135deg); margin-left:3px; }
.fcarousel .carousel-next::after{ transform:rotate(45deg); margin-right:3px; }
.fcarousel li:hover{ border:0 !important; }
/* =========================================================
v4 — cabecera plana, buscador centrado y menu de escritorio
========================================================= */
/* ---- Cabecera: logo a la izquierda, buscador centrado ---- */
#header{ background:#140306 !important; }
#header .wrap.cf{
display:flex !important; align-items:center; gap:26px;
padding-top:10px; padding-bottom:10px;
}
#headlogo{ flex:0 0 auto; float:none !important; margin:0 !important; }
#headlogo img{ filter:none !important; max-height:52px; width:auto; }
/* El toggle de busqueda del tema sobra: el buscador ya esta siempre visible */
#btn-toggle-search,.btn-toggle-search{ display:none !important; }
#nav-search{
flex:1 1 auto; display:flex !important; justify-content:center;
float:none !important; width:auto !important; margin:0 !important; padding:0 !important;
}
.searchform-div{ width:100%; max-width:440px; }
#header .searchform{ display:flex; width:100%; margin:0; }
#header .search-text-div{ flex:1 1 auto; display:flex; min-width:0; }
#header .searchform input[type="text"],#header .search-text{
flex:1 1 auto; width:100% !important; min-width:0;
background:#1F242E !important; border:1px solid #2A313D !important; border-right:0 !important;
color:#E9ECF2 !important; border-radius:8px 0 0 8px !important;
padding:10px 14px !important; font-size:.92rem; box-shadow:none !important;
}
#header .search-submit-div{ flex:0 0 auto; display:flex; }
/* El boton real es un : no admite ::before, asi que
la lupa va como imagen de fondo y se oculta el texto "Search" */
#header .searchform input[type="submit"],#header .search-submit{
width:48px !important; height:auto !important; min-height:42px;
font-size:0 !important; color:transparent !important; text-indent:-9999px;
border:0 !important; border-radius:0 8px 8px 0 !important; cursor:pointer;
background-color:#FF2B44 !important;
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=http://www.w3.org/2000/svg viewBox=0 0 24 24 fill=none stroke=white stroke-width=2.4 stroke-linecap=round%3E%3Ccircle cx=11 cy=11 r=7/%3E%3Cpath d=M20 20l-3.6-3.6/%3E%3C/svg%3E") !important;
background-repeat:no-repeat !important; background-position:center !important;
background-size:17px 17px !important;
box-shadow:none !important; transition:background-color .15s ease;
}
#header .searchform input[type="submit"]:hover,#header .search-submit:hover{ background-color:#E01834 !important; }
/* ---- Menu de escritorio: plano, sin biseles ---- */
@media (min-width:1000px){
#main-nav{
display:block !important;
background:#171A21 !important;
border-top:1px solid #2A313D; border-bottom:1px solid #2A313D;
box-shadow:none !important;
}
#main-nav .wrap{ display:flex; align-items:center; }
#main-nav .menu{
display:flex !important; align-items:center; width:100%;
list-style:none; margin:0; padding:0; background:none !important; border:0 !important;
}
#main-nav .menu > li{
margin:0 !important; padding:0 !important; float:none !important;
background:none !important; border:0 !important; position:relative;
}
#main-nav .menu > li.jp-espacio{ flex:1 1 auto; }
#main-nav .menu > li > a{
display:block; padding:13px 15px !important;
color:#C7CDD8 !important; background:none !important; border:0 !important;
font-size:.87rem; font-weight:600; letter-spacing:.01em; text-decoration:none;
text-shadow:none !important; box-shadow:none !important;
border-bottom:2px solid transparent;
transition:color .15s ease,border-color .15s ease;
}
#main-nav .menu > li > a:hover{ color:#FFF !important; border-bottom-color:#FF2B44; background:none !important; }
#main-nav .menu > li.jp-activo > a,
#main-nav .menu > li.current-menu-item > a{ color:#FFF !important; border-bottom-color:#FF2B44; background:none !important; }
/* Los salientes se distinguen sin gritar */
#main-nav .menu > li.jp-externo > a{
color:#8A93A3 !important; font-size:.82rem; font-weight:500;
}
#main-nav .menu > li.jp-externo > a:hover{ color:#C7CDD8 !important; border-bottom-color:transparent; }
/* ThePornDude es colaboracion: se queda y se ve */
#main-nav .menu > li.jp-colab > a{
color:#E9ECF2 !important; font-weight:600;
display:flex !important; align-items:center; gap:7px;
}
#main-nav .menu > li.jp-colab img,#main-nav .menu img.pinkynail{
width:20px !important; height:20px !important; border-radius:4px; vertical-align:middle;
}
}
/* ---- Barra de etiquetas, tambien plana ---- */
#middle-nav{ background:none !important; border:0 !important; }
#middle-nav .menu li a{
background:#1F242E !important; border:1px solid #2A313D !important;
border-radius:6px !important; box-shadow:none !important; text-shadow:none !important;
font-weight:600; letter-spacing:.01em;
}
#middle-nav .menu li a:hover,
#middle-nav .menu > li.current-menu-item > a{
background:#FF2B44 !important; border-color:#FF2B44 !important; color:#fff !important;
}
/* ---- Movil: manda el hamburguesa ---- */
@media (max-width:999px){
#main-nav,#middle-nav{ display:none !important; }
#header .wrap.cf{ padding-right:66px; gap:14px; }
#headlogo img{ max-height:40px; }
#nav-search{ order:3; flex:1 1 100%; justify-content:flex-start; }
.searchform-div{ max-width:none; }
}
/* El toggle de busqueda: una regla anterior le ponia display:inline-flex
con mayor especificidad, hay que igualarla o superarla */
#header #btn-toggle-search,
#header .btn-toggle-search,
header#header button.btn-toggle-search{ display:none !important; }
/* Centrado real del buscador: con flex se centraba en el espacio sobrante.
Con 3 columnas (1fr | auto | 1fr) queda centrado respecto a la pagina. */
@media (min-width:1000px){
#header .wrap.cf{
display:grid !important;
grid-template-columns:1fr auto 1fr;
align-items:center; gap:20px;
}
#headlogo{ grid-column:1; justify-self:start; }
#nav-search{ grid-column:2; justify-self:center; }
.searchform-div{ width:440px; max-width:100%; }
}
/* =========================================================
v5 — lupa del buscador, barra de etiquetas, carrusel y pie
========================================================= */
/* ---- 1. Lupa: un no admite ::before, asi que el icono
va en el contenedor, superpuesto y sin capturar clics ---- */
#header .search-submit-div{ position:relative; }
#header .search-submit-div::after{
content:""; position:absolute; top:50%; left:50%;
width:18px; height:18px; margin:-9px 0 0 -9px;
background:#fff; pointer-events:none;
-webkit-mask:no-repeat center/contain url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=http://www.w3.org/2000/svg viewBox=0 0 24 24 fill=none stroke=%23000 stroke-width=2.4 stroke-linecap=round%3E%3Ccircle cx=11 cy=11 r=7/%3E%3Cpath d=M20 20l-3.6-3.6/%3E%3C/svg%3E");
mask:no-repeat center/contain url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=http://www.w3.org/2000/svg viewBox=0 0 24 24 fill=none stroke=%23000 stroke-width=2.4 stroke-linecap=round%3E%3Ccircle cx=11 cy=11 r=7/%3E%3Cpath d=M20 20l-3.6-3.6/%3E%3C/svg%3E");
}
#header .searchform input[type="submit"],#header .search-submit{
background-image:none !important; height:44px !important;
}
#header .searchform input[type="text"],#header .search-text{ height:44px !important; }
/* ---- 2. Barra de etiquetas: el contenedor medida 30px de alto y
recortaba los botones de 48px ---- */
#middle-nav{
height:auto !important; max-height:none !important;
overflow:visible !important; padding:12px 0 !important; line-height:normal !important;
}
#middle-nav .menu{ align-items:center; }
#middle-nav .menu li a{ padding:9px 15px !important; line-height:1.25 !important; }
/* ---- 3. Miniaturas del carrusel: cuelgan de li.item-post, no de .item,
asi que las reglas anteriores no las alcanzaban y sus enlaces
se salian de la caja (380x300 dentro de 180x100) ---- */
.item-post .thumb,.carousel-list .thumb{
position:relative !important; overflow:hidden; border-radius:10px;
border:1px solid var(--jp-borde); width:100% !important; height:auto !important;
aspect-ratio:auto !important; line-height:0; display:block !important;
}
.item-post .thumb a.clip-link,.item-post .thumb .clip,
.carousel-list a.clip-link,.carousel-list .clip{
position:static !important; display:block !important;
width:100% !important; height:auto !important; inset:auto !important; transform:none !important;
}
.item-post .thumb img,.carousel-list img{
position:static !important; display:block !important;
width:100% !important; height:auto !important; max-width:100% !important;
aspect-ratio:4/3; object-fit:cover !important; margin:0 !important;
}
.item-post .vertical-align,.item-post .overlay,
.carousel-list .vertical-align,.carousel-list .overlay{ display:none !important; }
.carousel-list li{ width:180px !important; }
.carousel-list li .title,.carousel-list li .data{ padding-top:8px; }
.carousel-list li .title a{ font-size:.82rem; color:var(--jp-texto) !important; }
/* Hamburguesa totalmente opaco: se transparentaba el contenido de detras */
.jp-burger{ background:#171A21 !important; backdrop-filter:none !important; }
/* ---- 4. Pie por secciones ---- */
.jp-pie{ background:#12151B; border-top:1px solid var(--jp-borde); padding:40px 0 34px; margin-top:44px; }
.jp-pie-cols{
display:grid; gap:32px 34px;
grid-template-columns:1.5fr 1fr 1fr 1.2fr; align-items:start;
}
.jp-pie-logo{ display:inline-block; margin-bottom:14px; }
.jp-pie-logo img{ max-width:200px; height:auto; display:block; }
.jp-pie-logo-texto{ font-size:1.15rem; font-weight:800; color:var(--jp-texto); text-decoration:none; letter-spacing:-.02em; }
.jp-pie-desc{ margin:0 0 14px; font-size:.86rem; line-height:1.65; color:#98A1B0; max-width:42ch; }
.jp-pie-edad{ margin:0; font-size:.78rem; color:#98A1B0; display:flex; align-items:center; gap:9px; }
.jp-pie-edad span{
background:var(--jp-rojo); color:#fff; font-weight:800; font-size:.72rem;
padding:3px 8px; border-radius:5px; letter-spacing:.02em;
}
.jp-pie-col h3{
margin:0 0 14px; font-size:.74rem; font-weight:700; letter-spacing:.11em;
text-transform:uppercase; color:#E9ECF2; border:0 !important; padding:0 !important;
}
.jp-pie-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.jp-pie-col li{ margin:0; }
.jp-pie-col ul a{
display:flex; align-items:baseline; justify-content:space-between; gap:10px;
color:#A9B2C0 !important; text-decoration:none; font-size:.87rem;
transition:color .15s ease;
}
.jp-pie-col ul a:hover{ color:var(--jp-rojo) !important; }
.jp-pie-col ul em{ font-style:normal; font-size:.74rem; color:#6E7889; font-variant-numeric:tabular-nums; }
.jp-pie-buscar form{ display:flex; margin-bottom:12px; }
.jp-pie-buscar input{
flex:1 1 auto; min-width:0; padding:10px 13px; font-size:.87rem;
background:#1F242E; border:1px solid var(--jp-borde); border-right:0;
border-radius:8px 0 0 8px; color:var(--jp-texto);
}
.jp-pie-buscar input::placeholder{ color:#6E7889; }
.jp-pie-buscar button{
display:flex; align-items:center; justify-content:center; width:46px;
background:var(--jp-rojo); border:0; border-radius:0 8px 8px 0; color:#fff; cursor:pointer;
}
.jp-pie-buscar button:hover{ background:#E01834; }
.jp-pie-nota{ margin:0; font-size:.78rem; line-height:1.55; color:#6E7889; }
/* Barra inferior del tema, integrada con el pie nuevo */
#footer{ margin-top:0 !important; background:#0F1116 !important; border-top:1px solid var(--jp-borde); }
#colophon{ padding:18px 0 !important; }
#footer-nav ul{ display:flex; flex-wrap:wrap; gap:0; list-style:none; margin:0 0 8px; padding:0; }
#footer-nav li{ margin:0; }
#footer-nav li a{ color:#A9B2C0 !important; font-size:.84rem; padding:0 14px; border-left:1px solid var(--jp-borde); }
#footer-nav li:first-child a{ padding-left:0; border-left:0; }
#footer-nav li a:hover{ color:var(--jp-rojo) !important; }
#copyright{ margin:0 !important; font-size:.8rem; color:#6E7889 !important; }
#copyright a{ color:#A9B2C0 !important; }
@media (max-width:980px){
.jp-pie-cols{ grid-template-columns:1fr 1fr; gap:26px; }
.jp-pie-marca{ grid-column:1 / -1; }
}
@media (max-width:560px){
.jp-pie-cols{ grid-template-columns:1fr; }
.jp-pie{ padding:30px 0 26px; }
}
/* El li del carrusel traia alto fijo del tema y cortaba la miniatura */
.carousel-list li,.carousel-list li.item-post{
height:auto !important; min-height:0 !important; overflow:visible !important;
}
.carousel-games,.carousel-container{ height:auto !important; min-height:0 !important; }
/* Buscador: el tema separaba las dos mitades con margin-right:40px en
.search-text-div y flotaba el input, que ademas se salia en alto. */
#header .searchform{
padding:0 !important; align-items:stretch !important; height:44px;
}
#header .search-text-div{
margin:0 !important; padding:0 !important; height:44px !important;
}
#header .searchform input[type="text"],#header .search-text{
float:none !important; box-sizing:border-box !important;
height:44px !important; margin:0 !important;
}
#header .search-submit-div{
margin:0 !important; padding:0 !important; height:44px !important; width:48px;
}
#header .searchform input[type="submit"],#header .search-submit{
box-sizing:border-box !important; height:44px !important; width:48px !important;
padding:0 !important; margin:0 !important;
}
/* Lupa dibujada con bordes: el enmascarado SVG no llegaba a pintar.
Circulo (::after) + mango girado (::before), ambos sobre el boton. */
#header .search-submit-div::after,
#header .search-submit-div::before{ -webkit-mask:none !important; mask:none !important; }
#header .search-submit-div::after{
content:"" !important; position:absolute; top:50%; left:50%;
width:11px !important; height:11px !important; margin:-8px 0 0 -7px !important;
border:2px solid #fff; border-radius:50%; background:transparent !important;
pointer-events:none;
}
#header .search-submit-div::before{
content:"" !important; position:absolute; top:50%; left:50%;
width:2px; height:8px; margin:2px 0 0 2px;
background:#fff; border-radius:2px;
transform:rotate(-45deg); transform-origin:top center;
pointer-events:none;
}
/* El tema ponia un borde rojo de 4px sobre el pie */
#footer{ border-top:1px solid var(--jp-borde) !important; }
/* =========================================================
v6 — menu de escritorio y cierre del pie
========================================================= */
/* El tema fijaba #main-nav a 37px de alto mientras sus enlaces
miden 61: se salian de la barra y se veia entrecortada. */
@media (min-width:1000px){
#main-nav{
height:auto !important; min-height:0 !important; max-height:none !important;
overflow:visible !important; line-height:normal !important;
}
#main-nav .wrap{ height:auto !important; min-height:0 !important; }
#main-nav .menu{ height:auto !important; min-height:0 !important; }
#main-nav .menu > li{ height:auto !important; line-height:normal !important; }
#main-nav .menu > li > a{
height:auto !important; line-height:1.25 !important;
padding:14px 15px !important; box-sizing:border-box;
}
#main-nav .menu > li.jp-colab > a{ padding-top:11px !important; padding-bottom:11px !important; }
}
/* ---- El pie viejo del tema desaparece: sus enlaces ya viven en el nuevo ---- */
#footer,#colophon{ display:none !important; }
.jp-pie-barra{
margin-top:30px; padding-top:20px; border-top:1px solid var(--jp-borde);
display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px;
}
.jp-pie-legal{
list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:0; flex:1 1 auto;
}
.jp-pie-legal li{ margin:0; }
.jp-pie-legal li a{
display:block; color:#A9B2C0 !important; font-size:.83rem; text-decoration:none;
padding:0 14px; border-left:1px solid var(--jp-borde);
}
.jp-pie-legal li:first-child a{ padding-left:0; border-left:0; }
.jp-pie-legal li a:hover{ color:var(--jp-rojo) !important; }
.jp-pie-copy{
margin:0 !important; font-size:.8rem; color:#6E7889 !important; flex:0 0 auto;
}
.jp-pie-copy a{ color:#A9B2C0 !important; text-decoration:none; }
.jp-pie-copy a:hover{ color:var(--jp-rojo) !important; }
.jp-pie{ padding-bottom:28px; }
@media (max-width:760px){
.jp-pie-barra{ flex-direction:column; align-items:flex-start; gap:12px; }
.jp-pie-legal{ gap:6px 0; }
.jp-pie-legal li a{ padding:0 12px; }
}
/* =========================================================
v7 — movil: hamburguesa fijo al documento y sin carrusel
========================================================= */
@media (max-width:999px){
/* Antes flotaba sobre el contenido (position:fixed) y por eso se veian
cosas pasando por detras al hacer scroll. Ahora va anclado arriba y
se desplaza con la pagina. */
.jp-burger{
position:absolute !important; top:14px !important; right:14px !important;
background:#171A21 !important; z-index:60;
}
.admin-bar .jp-burger{ top:60px !important; }
/* El carrusel de portada no aporta en movil y ocupa media pantalla */
.cat-featured,.carousel,.fcarousel,.carousel-container{ display:none !important; }
/* El panel si debe seguir fijo: es una capa superpuesta */
.jp-panel{ position:fixed !important; }
.jp-velo{ position:fixed !important; }
}