/*
Theme Name: Cartucho Dorado
Theme URI: https://cartuchodorado.com
Author: cartuchodorado.com
Description: Tema del blog Cartucho Dorado: noticias, reseñas y guías de videojuegos. Mapa de mundos con niveles, botones gruesos y colores de cielo y pasto.
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: cartucho-dorado
*/

:root {
  --sky: #7fd0ff; --sky-2: #bfe6ff; --grass: #4cc26a; --grass-2: #3aa657; --sun: #ffd23f; --brick: #e2572b; --brick-2: #e8703f; --brick-line: #9c3a17;
  --violet: #8b7bff; --orange: #ff9f43; --ink: #1c2541; --paper: #ffffff; --muted: #4a5578;
  --link: #1a3fd0; --focus: #1c2541;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --display: "Fredoka", "Trebuchet MS", "Segoe UI", sans-serif;
  --text: "Nunito", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --sky: #1a2350; --sky-2: #2a3574; --grass: #2f8f4d; --grass-2: #256f3c; --ink: #f2f4ff; --paper: #232c5c; --muted: #b6bfe6;
  --brick: #d24a20; --brick-2: #b8471f; --brick-line: #6e2a10; --link: #9cc4ff; --focus: #ffd23f;
  color-scheme: dark;
}
/* Rasgos que no cambian con el tema: contornos y texto sobre color */
:root { --line: #1c2541; --on-color: #1c2541; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--sky); color: var(--ink); font: 500 1.0625rem/1.6 var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; position: relative; }
::selection { background: var(--sun); color: #1c2541; }
a { color: inherit; text-underline-offset: 0.2em; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 700; text-wrap: balance; letter-spacing: -0.01em; line-height: 1.05; }
p { margin: 0; }
.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: max(16px, 4vw); position: relative; }

/* Nubes (decoración) */
.sky { position: absolute; inset: 0 0 auto 0; height: 420px; pointer-events: none; overflow: hidden; z-index: 0; }
.sky i { position: absolute; background: #fff; border-radius: 6px; box-shadow: 30px -18px 0 8px #fff, 62px 0 0 0 #fff; opacity: 0.9; }
.sky .c1 { width: 90px; height: 26px; left: 3%; top: 96px; } .sky .c2 { width: 70px; height: 22px; left: 40%; top: 70px; } .sky .c3 { width: 100px; height: 28px; right: 6%; top: 150px; }

:root[data-theme="dark"] .sky i { background: #3a4690; box-shadow: 30px -18px 0 8px #3a4690, 62px 0 0 0 #3a4690; }

/* Cabecera */
.head { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; padding-block: 22px 10px; flex-wrap: wrap; z-index: 1; }
a.logo { display: block; text-decoration: none; line-height: 0; }
.logo-svg { display: block; width: clamp(200px, 30vw, 380px); height: auto; }
.lg-f { fill: var(--sun); } .lg-s { fill: #1c2541; }
.cats { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.bt, .big, .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 3px solid var(--line); border-bottom-width: 7px; border-radius: 14px; background: var(--sun); color: var(--on-color); font: 700 0.98rem/1 var(--display); text-decoration: none; cursor: pointer; transition: transform 150ms var(--ease-out), border-bottom-width 150ms var(--ease-out); }
.bt:active, .big:active, .btn:active { transform: translateY(3px); border-bottom-width: 4px; }
@media (hover: hover) and (pointer: fine) { .bt:hover, .big:hover, .btn:hover { transform: translateY(-2px); } }
.t-noticias { background: var(--sun); } .t-resenas { background: var(--grass); } .t-guias { background: #fff; } .t-indies { background: var(--brick); color: #fff; } .t-retro { background: var(--orange); }
.bt[aria-current="page"] { outline: 3px solid var(--line); outline-offset: 3px; }
.big { min-height: 56px; padding: 0 30px; font-size: 1.15rem; background: var(--brick); color: #fff; border-bottom-width: 8px; border-radius: 16px; }
.btn { background: var(--brick); color: #fff; }

/* Portada */
.hero { display: grid; gap: 28px 48px; padding-block: clamp(20px, 4vw, 44px) clamp(32px, 5vw, 56px); align-items: center; z-index: 1; }
@media (min-width: 980px) { .hero { grid-template-columns: 1.05fr 1fr; } }
.tag { display: inline-block; background: #fff; color: var(--on-color); border: 3px solid var(--line); border-bottom-width: 6px; border-radius: 12px; padding: 7px 14px; font: 700 0.9rem/1 var(--display); letter-spacing: 0.06em; }
.hero h1 { font-size: clamp(2.8rem, 6.4vw, 4.8rem); line-height: 1; margin: 18px 0 16px; letter-spacing: -0.02em; }
.hero h1 mark { background: var(--sun); color: #1c2541; padding: 0 0.16em; border: 3px solid var(--line); border-radius: 12px; display: inline-block; transform: rotate(-2deg); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hero .sub { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.45; max-width: 34ch; margin-bottom: 26px; font-weight: 600; }
.map { position: relative; height: clamp(280px, 34vw, 360px); background: var(--grass); border: 4px solid var(--line); border-radius: 28px; overflow: hidden; box-shadow: 0 8px 0 var(--line); }
.map::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 30% 100%, var(--grass-2) 98%, transparent 100%), radial-gradient(ellipse 50% 40% at 85% 100%, var(--grass-2) 98%, transparent 100%); }
.trail { position: absolute; inset: 0; width: 100%; height: 100%; }
.nd { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 6px; transform: translate(-50%, 0); text-decoration: none; font: 700 0.85rem/1 var(--display); background: none !important; border: 0 !important; color: var(--on-color); transition: transform 160ms var(--ease-out); }
.nd i { font-style: normal; width: 54px; height: 54px; border-radius: 50%; border: 4px solid var(--line); box-shadow: 0 5px 0 var(--line); display: grid; place-items: center; font-size: 1.3rem; }
.nd span { background: #fff; border: 2px solid var(--line); border-radius: 8px; padding: 3px 9px; }
.nd.t-noticias i { background: var(--brick); color: #fff; } .nd.t-resenas i { background: var(--sun); } .nd.t-guias i { background: #fff; } .nd.t-indies i { background: var(--violet); } .nd.t-retro i { background: var(--orange); }
.nd:active { transform: translate(-50%, 3px); }
@media (hover: hover) and (pointer: fine) { .nd:hover { transform: translate(-50%, -4px); } }
.nd { animation: hop 520ms var(--ease-out) both; } .nd:nth-of-type(2) { animation-delay: 90ms; } .nd:nth-of-type(3) { animation-delay: 180ms; } .nd:nth-of-type(4) { animation-delay: 270ms; } .nd:nth-of-type(5) { animation-delay: 360ms; }
@keyframes hop { from { opacity: 0; margin-top: -24px; } to { opacity: 1; margin-top: 0; } }

/* Secciones y tarjetas */
.sp { padding-block: clamp(20px, 4vw, 44px) 0; position: relative; z-index: 1; }
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.sec-head h2 { font-size: clamp(2rem, 4vw, 2.6rem); }
.sec-head .more { font-weight: 800; }
.cards { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card { display: grid; gap: 8px; align-content: start; text-decoration: none; background: var(--paper); border: 3px solid var(--line); border-bottom-width: 8px; border-radius: 20px; padding: 12px 12px 18px; transition: transform 170ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .card:hover { transform: translateY(-4px); } }
.card:active { transform: translateY(2px); }
.card .th { height: 140px; border-radius: 12px; border: 3px solid var(--line); display: grid; place-items: center; position: relative; overflow: hidden; margin-bottom: 4px; background: var(--sun); }
.card .th svg { width: 64px; height: auto; }
.card .th .lv { position: absolute; left: 8px; top: 8px; background: #1c2541; color: var(--sun); font: 700 0.7rem/1 var(--display); letter-spacing: 0.1em; padding: 4px 8px; border-radius: 6px; }
.card .th.has-img { padding: 0; }
.card .th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card.noticias .th { background: var(--brick); } .card.resenas .th { background: var(--sun); } .card.guias .th { background: var(--violet); } .card.indies .th { background: var(--sky-2); } .card.retro .th { background: var(--orange); } .card.otro .th { background: var(--sky-2); }
.card .kind { font: 700 0.72rem/1 var(--display); letter-spacing: 0.12em; color: var(--brick); padding-inline: 4px; }

:root[data-theme="dark"] .card .kind { color: var(--sun); }
.card h3 { font-size: clamp(1.15rem, 1.7vw, 1.35rem); line-height: 1.12; padding-inline: 4px; }
.card p { color: var(--muted); font-size: 0.95rem; line-height: 1.4; padding-inline: 4px; font-weight: 600; }
.meta { font-size: 0.86rem; font-weight: 700; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.card .meta { padding-inline: 4px; }
.st { color: #d99a00; letter-spacing: 2px; font-size: 1rem; }
.empty { padding: 28px 0; }

/* Boletín, pasto y pie */
.news-wrap { margin-top: clamp(40px, 6vw, 64px); z-index: 1; }
.news { background: var(--sun); color: var(--on-color); border: 4px solid var(--line); border-radius: 24px; box-shadow: 0 8px 0 var(--line); padding: clamp(22px, 3.4vw, 38px); display: grid; gap: 20px; }
@media (min-width: 900px) { .news { grid-template-columns: 1fr 1fr; align-items: center; column-gap: 48px; } }
.news h2 { font-size: clamp(1.8rem, 3.6vw, 2.4rem); }
.news .hint { margin-top: 8px; font-weight: 700; }
.news-embed { font-weight: 700; }
.news-embed form { display: grid; gap: 10px; }
.news-embed input[type="email"], .news-embed input[type="text"] { width: 100%; min-height: 52px; padding: 0 16px; border: 3px solid var(--line); border-radius: 14px; background: #fff; color: #1c2541; font: 700 1rem var(--text); }
.news-embed button, .news-embed input[type="submit"] { min-height: 52px; padding: 0 24px; border: 3px solid var(--line); border-bottom-width: 7px; border-radius: 14px; background: var(--brick); color: #fff; font: 700 1rem var(--display); cursor: pointer; }
.news-embed a { color: inherit; }
.grass { height: 40px; background: var(--grass); border-top: 5px solid var(--line); margin-top: clamp(44px, 6vw, 64px); position: relative; z-index: 1; }
footer { background: var(--brick); border-top: 5px solid var(--line); position: relative; overflow: hidden; z-index: 1; }
.bricks { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(10, 1fr); grid-auto-rows: 34px; align-content: start; }
.bricks i { border: 2px solid var(--brick-line); background: var(--brick-2); display: block; }
footer .fi { position: relative; padding-block: 30px 40px; display: grid; gap: 10px; }
footer .fi p { background: #1c2541; color: #fff; display: inline-block; justify-self: start; padding: 8px 14px; border-radius: 8px; font-size: 0.86rem; font-weight: 700; line-height: 1.5; max-width: 90ch; }

/* Entrada */
.progress { position: fixed; inset: 0 0 auto 0; height: 6px; background: var(--brick); transform: scaleX(0); transform-origin: left; z-index: 20; }
.back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 10px; font-weight: 800; text-decoration: none; position: relative; z-index: 1; }
.back span { transition: transform 160ms var(--ease-out); display: inline-block; }
@media (hover: hover) and (pointer: fine) { .back:hover span { transform: translateX(-4px); } }
article.post, article.page, .a-head, .layout { position: relative; z-index: 1; }
.a-head { padding-block: 18px clamp(24px, 4vw, 44px); border-bottom: 4px dotted var(--line); }
.a-head h1 { font-size: clamp(2.2rem, 5.6vw, 4.2rem); line-height: 1; max-width: 18ch; margin-bottom: 16px; }
.a-head h1 mark { background: var(--sun); color: #1c2541; padding: 0 0.12em; border: 3px solid var(--line); border-radius: 10px; }
.a-head .dek { font-size: clamp(1.1rem, 1.8vw, 1.35rem); line-height: 1.45; max-width: 44ch; margin-bottom: 18px; font-weight: 600; }
.a-img { margin-top: 26px; }
.a-img img { width: 100%; height: auto; max-height: 460px; object-fit: cover; border: 4px solid var(--line); border-radius: 24px; box-shadow: 0 8px 0 var(--line); display: block; }
.layout { display: grid; gap: 32px; padding-block: 36px 56px; }
@media (min-width: 980px) { .layout { grid-template-columns: 210px minmax(0, 68ch); justify-content: start; column-gap: 64px; } }
.layout.no-toc { grid-template-columns: minmax(0, 68ch); }
.toc { font-size: 0.94rem; }
@media (min-width: 980px) { .toc { position: sticky; top: 24px; align-self: start; } }
.toc b { display: block; margin-bottom: 10px; font: 700 1rem var(--display); }
.toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.toc button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 9px 14px; border-radius: 12px; cursor: pointer; font-weight: 700; }
.toc button[aria-current="true"] { background: var(--sun); color: #1c2541; font-weight: 800; }
.prose { background: var(--paper); border: 3px solid var(--line); border-radius: 22px; padding: clamp(20px, 3.4vw, 40px); font: 500 clamp(1.06rem, 1.3vw, 1.18rem)/1.75 var(--text); }
.prose > * + * { margin-top: 1.15em; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); margin-top: 1.9em; scroll-margin-top: 20px; }
.prose h2:first-child { margin-top: 0; }
.prose h2 + p { margin-top: 0.7em; }
.prose h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin-top: 1.7em; }
.prose strong { font-weight: 800; }
.prose a { color: var(--link); text-decoration-thickness: 2px; }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: 0.5em; }
.prose img, .prose video, .prose iframe { max-width: 100%; height: auto; border-radius: 14px; }
.prose figure { margin: 1.6em 0; }
.prose figcaption { font-size: 0.88rem; color: var(--muted); margin-top: 8px; }
.prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 18px; border-left: 6px solid var(--sun); font-weight: 700; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--sky-2); }
.prose hr { border: 0; border-top: 4px dotted var(--line); margin: 2.2em 0; }
.prose .is-style-pull { font: 700 clamp(1.5rem, 3vw, 2.1rem)/1.12 var(--display); background: var(--sun); color: #1c2541; border: 3px solid var(--line); border-radius: 18px; padding: clamp(18px, 3vw, 28px); text-wrap: balance; }
.prose .is-style-callout { background: var(--sky-2); color: #1c2541; border: 3px solid var(--line); border-radius: 16px; padding: 16px 20px; font-size: 1rem; line-height: 1.55; }
.prose .is-style-example { font-size: 1rem; background: var(--grass); color: #1c2541; border: 3px solid var(--line); border-radius: 18px; padding: clamp(18px, 3vw, 28px); }
.prose .is-style-example a { color: inherit; }
.fuente { margin-top: 2em; font-weight: 800; }
.author { margin-top: 2.6em; padding-top: 20px; border-top: 4px dotted var(--line); font-size: 1rem; line-height: 1.55; display: grid; gap: 14px; }
.author .row2 { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.btn.ghost { background: #fff; color: #1c2541; } .btn.sm { min-height: 40px; font-size: 0.9rem; }
.related { padding-block: 0 8px; position: relative; z-index: 1; }
.callout { background: var(--sky-2); color: #1c2541; border: 3px solid var(--line); border-radius: 16px; padding: 16px 20px; }

/* WordPress */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed !important; left: 12px; top: 12px; width: auto; height: auto; clip: auto; margin: 0; padding: 12px 18px; background: var(--sun); color: #1c2541; z-index: 100; border-radius: 10px; font-weight: 800; }
.pagination { padding-block: 32px 0; position: relative; z-index: 1; }
.pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pagination .page-numbers { min-width: 44px; min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; border: 3px solid var(--line); border-bottom-width: 6px; border-radius: 12px; text-decoration: none; font: 700 1rem var(--display); background: #fff; color: #1c2541; }
.pagination .page-numbers.current { background: var(--sun); }
.search-form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.search-form label { flex: 1 1 240px; }
.search-form .search-field { width: 100%; min-height: 50px; padding: 0 16px; border: 3px solid var(--line); border-radius: 14px; background: #fff; color: #1c2541; font: 700 1rem var(--text); }
.search-form .search-submit { min-height: 50px; padding: 0 24px; border: 3px solid var(--line); border-bottom-width: 7px; border-radius: 14px; background: var(--brick); color: #fff; font: 700 1rem var(--display); cursor: pointer; }
.wp-caption, .alignnone { max-width: 100%; }
.aligncenter { display: block; margin-inline: auto; }

@media (max-width: 600px) { .nd i { width: 44px; height: 44px; font-size: 1.05rem; } .nd span { font-size: 0.72rem; padding: 2px 6px; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nd { animation: none; }
  .bt, .big, .btn, .card, .nd, .back span { transition: none; }
}