@charset "UTF-8"; :root { --color-dark: #222222; --color-trucos: #99ff00; --color-soluciones: #ffa500; --color-amiga: #ff6600; --color-c64: #0099ff; --color-text-light: #ffffff; --color-text-muted: #e0e0e0; --border-radius-base: 10px; --focus-outline: 3px solid var(--color-trucos); --focus-outline-offset: 3px; } .caja, .site-main, .inside-header, .juego-template-default .site-main, .inside-left-sidebar { border-image-slice: 10 10 10 10 fill; border-image-width: 10px 10px 10px 10px; border-image-outset: 0px 0px 0px 0px; border-image-repeat: round round; border-image-source: url("data:image/webp;base64,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"); border-style: solid; color: #040404; border-width: 5px; } .site-header { margin-bottom: 20px !important; } @media (max-width: 768px) { .site-header { margin-bottom: 10px !important; } .site-header .inside-header { padding: 10px 15px; display: flex; flex-direction: column; gap: 10px; } .site-header .header-search-bar { margin-left: 0 !important; width: 100%; } .site-header .site-logo { max-width: 180px; margin: 0 auto; } } a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-outline-offset); border-radius: 3px; } .site-main { padding: 10px; } .main-title { font-size: 1.5rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin: 0; } .main-title a { color: #040404 !important; text-shadow: none; } @media (max-width: 768px) { .main-title { font-size: 1.2rem; text-align: center; } } .caja-negra { padding: 10px; border-radius: var(--border-radius-base); background-color: var(--color-dark); background-image: url(/template/img/estrellas.webp); background-repeat: repeat; color: var(--color-text-light); transition: transform 0.2s ease, box-shadow 0.2s ease; } .caja-negra:hover { transform: translateY(-3px); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); } .caja-negra a { color: var(--color-text-light); text-decoration: none; } .caja-negra.trucos, .caja-negra.trucos a { color: var(--color-trucos); } .caja-negra.soluciones, .caja-negra.soluciones a { color: var(--color-soluciones); } .home-hero { text-align: center; padding: 60px 20px; margin-bottom: 40px; } .home-hero__title { font-size: 2.5em; margin-bottom: 15px; font-weight: bold; } .home-hero__sub { font-size: 1.25em; max-width: 800px; margin: 0 auto; line-height: 1.6; opacity: 0.85; } @media (max-width: 768px) { .home-hero { padding: 40px 15px; margin-bottom: 25px; } .home-hero__title { font-size: 1.8em; } .home-hero__sub { font-size: 1.1em; } } .populares-list-container { margin-bottom: 40px; } .populares-title { margin-bottom: 20px; font-size: 1.8em; text-align: center; } .grid-sistemas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; } .sistema-card { background: #1a1a2e; border: 1px solid #333; border-radius: var(--border-radius-base); overflow: hidden; text-align: center; transition: transform 0.2s ease, box-shadow 0.2s ease; } .sistema-card:hover { transform: translateY(-5px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } .sistema-card a { color: var(--color-text-light); text-decoration: none; display: block; } .sistema-card .sistema-img { overflow: hidden; line-height: 0; position: relative; padding-bottom: 75%; } .sistema-card .sistema-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; transition: transform 0.3s ease; } .sistema-card .sistema-img:not(:has(img[src])), .sistema-card .sistema-img:has(img[src=""]) { background: linear-gradient(135deg, #1a1a3e 0%, #2d2d5e 50%, #1a1a3e 100%); display: flex; align-items: center; justify-content: center; } .sistema-card .sistema-img:not(:has(img[src]))::after, .sistema-card .sistema-img:has(img[src=""])::after { content: "🎮"; font-size: 3rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .sistema-card .sistema-img-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1a1a3e 0%, #2d2d5e 50%, #1a1a3e 100%); } .sistema-card .sistema-img-placeholder span { font-size: 3.5rem; line-height: 1; } .sistema-card:hover .sistema-img img { transform: scale(1.04); } .sistema-card h3 { margin: 10px 10px 4px; font-size: 1.05em; color: var(--color-text-light); } .sistema-card p { margin: 0 10px 12px; font-size: 0.85em; color: var(--color-text-muted); } .sistema-hero-img { max-width: 560px; margin: 0 auto 28px; } .sistema-hero-img img { width: 100%; border-radius: 12px; box-shadow: 0 6px 32px rgba(0, 0, 0, 0.6); display: block; } @media (max-width: 600px) { .sistema-hero-img { max-width: 240px; margin-bottom: 20px; } } .juegos-sistema-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; margin: 20px 0; } .juegos-sistema-grid.sistema-amiga .juego-card { border-color: var(--color-amiga); } .juegos-sistema-grid.sistema-c64 .juego-card { border-color: var(--color-c64); } @media (max-width: 600px) { .juegos-sistema-grid { grid-template-columns: 1fr; } } .juego-card { display: block; text-decoration: none; color: var(--color-text-light); padding: 15px; border-radius: 12px; position: relative; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; border: 2px solid #444; } .juego-card:hover { transform: translateY(-4px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); } @media (max-width: 600px) { .juego-card { padding: 12px; } } .juego-title { margin: 0 0 10px; font-size: 1.1rem; font-weight: 600; line-height: 1.2; } .juego-sistema-tag { display: inline-block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 4px; padding: 2px 7px; margin-bottom: 6px; line-height: 1.6; } .rating-score, .thumbs-media, .juego-visitas { font-size: 0.85rem; margin-top: 6px; color: var(--color-text-muted); opacity: 0.7; } .paginacion { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 20px 0; font-size: 0.95rem; } .paginacion a, .paginacion span { display: inline-block; padding: 8px 12px; border-radius: 6px; text-decoration: none; color: var(--color-text-light); background-color: #333; border: 1px solid #555; transition: background-color 0.2s, color 0.2s; } .paginacion a:hover { background-color: #555; color: var(--color-text-light); } .paginacion .current { background-color: var(--color-trucos); border-color: var(--color-trucos); color: #111; font-weight: bold; pointer-events: none; } .paginacion .next, .paginacion .prev { background-color: #444; } .paginacion .next:hover, .paginacion .prev:hover { background-color: #555; } .search-results-wrapper { max-width: 1100px; margin: 0 auto; } .search-header { margin-bottom: 20px; } .search-title { font-size: 1.6rem; margin: 0 0 6px; } .search-title em { font-style: normal; color: var(--color-trucos); } .search-count { font-size: 0.95rem; color: var(--color-text-light); margin: 0 0 16px; } .search-post-type { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.6; margin-bottom: 4px; } .search-excerpt { font-size: 0.85rem; margin: 6px 0 0; line-height: 1.5; color: var(--color-text-muted); } .search-excerpt strong, .search-excerpt b, .search-excerpt mark, .search-excerpt .relevanssi-query { background-color: rgba(153, 255, 0, 0.15) !important; color: #ffffff !important; padding: 1px 4px; border-radius: 3px; font-weight: 600; box-shadow: none !important; } .search-results-grid .juego-title { font-size: 1rem; margin-bottom: 2px; } .no-results-search { padding: 30px; background: var(--color-dark); border-radius: var(--border-radius-base); color: var(--color-text-muted); } .no-results-search strong { color: var(--color-trucos); } .search-form-wrapper { margin-top: 20px; } .search-form { display: flex; max-width: 600px; margin: 0 auto; position: relative; width: 100%; } .search-form label { width: 100%; margin: 0; } .search-form .search-field { width: 100%; padding: 12px 100px 12px 15px; background-color: #1a1a2e; border: 2px solid rgba(255, 255, 255, 0.1); border-radius: var(--border-radius-base); color: var(--color-text-light); font-size: 1rem; transition: all 0.3s ease; } .search-form .search-field:focus { background-color: rgba(255, 255, 255, 0.1); border-color: var(--color-trucos); outline: none; box-shadow: 0 0 12px rgba(153, 255, 0, 0.15); } .search-form .search-field::placeholder { color: rgba(255, 255, 255, 0.4); } .search-form .search-submit { position: absolute; right: 5px; top: 5px; bottom: 5px; padding: 0 25px; background-color: var(--color-trucos); color: #111; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; } .search-form .search-submit:hover { background-color: #ffffff; color: #111; transform: translateY(-1px); } .search-form .search-submit:focus-visible { outline: var(--focus-outline); outline-offset: -2px; } @media (max-width: 768px) { .search-form .search-field { padding: 10px 100px 10px 15px; font-size: 0.95rem; } .search-form .search-submit { padding: 0 15px; font-size: 0.9rem; } } .footer { padding: 0 !important; } .custom-footer { background-color: transparent !important; border: none !important; padding: 20px 0; } .custom-footer .footer-content { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 30px; flex-wrap: nowrap; padding: 20px; } @media (max-width: 768px) { .custom-footer .footer-content { flex-direction: column; text-align: center; flex-wrap: wrap; gap: 20px; } } .custom-footer .footer-logo-area { flex: 0 0 auto; margin: 0; } .custom-footer .footer-logo-area .custom-logo-link { display: inline-block; line-height: 0; } .custom-footer .footer-logo-area .custom-logo-link img { height: auto; max-width: 150px; } .custom-footer .footer-text-area { flex: 1 1 auto; text-align: left; display: flex; flex-direction: column; gap: 5px; } @media (max-width: 768px) { .custom-footer .footer-text-area { text-align: center; align-items: center; } } .custom-footer .footer-copyright-area { font-size: 0.85em; opacity: 0.8; } .custom-footer .footer-copyright-area p { margin: 0; padding-bottom: 5px; line-height: 1.5; } .custom-footer .footer-enlaces-en-linea { margin: 0; display: flex; justify-content: flex-start; } .custom-footer .footer-enlaces-en-linea ul { display: flex; gap: 15px; list-style: none; padding: 0; margin: 0; justify-content: flex-start; flex-wrap: wrap; font-size: 0.85em; } .custom-footer .footer-enlaces-en-linea ul li { margin: 0; } .custom-footer .footer-enlaces-en-linea ul a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } .custom-footer .footer-enlaces-en-linea ul a:hover { text-decoration: underline; } .custom-footer .footer-enlaces-en-linea ul a::after { content: ""; width: 11px; height: 11px; display: inline-block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; opacity: 0.5; transition: opacity 0.2s ease; } .custom-footer .footer-enlaces-en-linea ul a:hover::after { opacity: 1; } .custom-footer .footer-legal-links { margin-top: 10px; display: flex; gap: 15px; flex-wrap: wrap; font-size: 0.8em; opacity: 0.7; justify-content: flex-start; } @media (max-width: 768px) { .custom-footer .footer-legal-links { justify-content: center; } } .custom-footer .footer-legal-links a { color: inherit; text-decoration: none; } .custom-footer .footer-legal-links a:hover { text-decoration: underline; opacity: 1; } .thumbs-rating-container { color: lightgrey; } .breadcrumb { font-size: 0.9rem; margin-bottom: 1em; } .breadcrumb a.breadcrumb-item { color: #0073aa; text-decoration: none; } .breadcrumb a.breadcrumb-item:hover { text-decoration: underline; } .breadcrumb .breadcrumb-sep { margin: 0 0.3em; color: #555; } .breadcrumb .breadcrumb-current { color: var(--color-dark); font-weight: 600; } .spacer-100 { height: 100px; } .spacer-20 { height: 20px; } .juegos-list-grid { display: grid; gap: 20px; grid-template-columns: 1fr; } .trucos-list-container, .hero-juego-container, .soluciones-destacadas-container { padding: 20px; } .juego-list-item, .solucion-item-container, .truco-item-container { width: 100%; } .solucion-item-container, .truco-item-container { padding: 10px; } .soluciones-destacadas-container { margin-top: 40px; } .juego-list-title { font-size: 20px; margin-bottom: 5px; } .juego-list-meta, .juego-list-date { display: inline-flex; flex-wrap: wrap; justify-content: space-between; column-gap: 10px; position: relative; font-size: 14px; margin-bottom: 0px; } .hero-juego-container { padding: 20px; margin-bottom: 20px; word-break: break-word; position: relative; } .hero-juego-title { margin-bottom: 1em; } .enlace-juegomania { margin-top: 1.5em; } .btn-juegomania { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; background-color: var(--color-trucos); color: #111111; border: 2px solid var(--color-trucos); border-radius: 8px; font-weight: 700; font-size: 0.95rem; text-decoration: none; letter-spacing: 0.02em; transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.25s ease, color 0.2s ease; box-shadow: 0 4px 14px rgba(153, 255, 0, 0.25); } .btn-juegomania:hover { background-color: #111111; color: var(--color-trucos); border-color: var(--color-trucos); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(153, 255, 0, 0.45); } .btn-juegomania:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-outline-offset); } .btn-juegomania svg { flex-shrink: 0; } .soluciones-grid { display: flex; flex-direction: column; gap: 20px; } .solucion-intro { margin-bottom: 10px; font-size: 0.95em; opacity: 0.9; } .solucion-item-title { margin: 0; font-size: 1.4em; } .solucion-item-title a { text-decoration: none; transition: color 0.2s; } .solucion-item-title a:hover { text-decoration: underline; } .trucos-grid { display: flex; flex-direction: column; gap: 40px; } .truco-item-author { color: var(--color-trucos); margin-top: 15px; font-weight: bold; } .rating-trucooff { margin-top: 15px; } .soluciones-destacadas-title { font-size: 1.5em; margin-bottom: 20px; } .solucion-destacada-item-title { font-size: 1.2em; margin-bottom: 10px; } .footer-enlaces-en-linea { margin: 5px 0 0 0; } .footer-enlaces-en-linea ul, .footer-enlaces-en-linea li { list-style: none !important; padding: 0; margin: 0; } .footer-enlaces-en-linea ul, .footer-enlaces-en-linea ul.xoxo, .footer-enlaces-en-linea ul.blogroll { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 8px; } .footer-enlaces-en-linea li, .footer-enlaces-en-linea li.linkcat { display: flex; align-items: center; font-size: 0.82em; background: transparent; border: none; } .footer-enlaces-en-linea li::before, .footer-enlaces-en-linea li.linkcat::before { display: none !important; } .footer-enlaces-en-linea li, .footer-enlaces-en-linea li.linkcat { } .footer-enlaces-en-linea li::after, .footer-enlaces-en-linea li.linkcat::after { content: "|"; color: rgba(255, 255, 255, 0.4); margin-left: 8px; font-size: 1.1em; font-weight: normal; } .footer-enlaces-en-linea li, .footer-enlaces-en-linea li.linkcat { } .footer-enlaces-en-linea li:last-child::after, .footer-enlaces-en-linea li.linkcat:last-child::after { display: none; } .footer-enlaces-en-linea li a, .footer-enlaces-en-linea li.linkcat a { color: var(--color-amiga); text-decoration: none; font-weight: 500; padding: 2px 5px; border-radius: 3px; transition: all 0.2s ease; } .footer-enlaces-en-linea li a:hover, .footer-enlaces-en-linea li a:focus, .footer-enlaces-en-linea li.linkcat a:hover, .footer-enlaces-en-linea li.linkcat a:focus { color: #ffffff; background-color: rgba(255, 255, 255, 0.05); text-decoration: none; text-shadow: 0 0 8px rgba(255, 102, 0, 0.4); } .menu-toggle, .mobile-menu-control-wrapper { display: none !important; }