/* ==========================================================================
   GTA 6 Console Setup — hoja de estilos única (mobile-first, modo claro por defecto)
   Paleta tomada de /Downloads/GTA/DESIGN.md (reinterpretada). Los tokens marcados
   "AÑADIDO" no existen en esa guía: los he propuesto yo para cubrir huecos.
   ========================================================================== */

/* Fuentes: Oswald (titulares, condensada, parecida a ArtDecoCondensedBold) e Inter (texto).
   Se cargan desde /assets/fonts/ cuando existan los .woff2; mientras tanto, fuentes del sistema. */
@font-face {
  font-family: "Oswald";
  src: local("Oswald"), url("/assets/fonts/oswald-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: local("Inter"), url("/assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* --- Paleta de marca --- */
  --color-ink:   #0F0C1A;   /* texto principal / fondos oscuros */
  --color-peach: #FFD4A8;   /* acento / botón principal */
  --color-pink:  #FFB2C6;   /* acento puntual */
  --color-mint:  #B8F0EA;
  --color-blush: #FEE8EA;
  --color-sky:   #D9F3FE;
  --color-cream: #FFF9CB;
  --color-white: #FFFFFF;

  /* --- AÑADIDO (no estaban en la guía de marca) --- */
  --color-link:       #3B2A8C;  /* enlaces: contraste >= 8:1 sobre blanco */
  --color-link-hover: #1F1560;
  --color-muted:      #4F4A63;  /* texto secundario */
  --color-border:     #E3DFEC;
  --color-alert:      #B3261E;  /* errores y avisos */
  --color-alert-bg:   #FDECEA;
  --color-ok-bg:      #E6F6EE;  /* confirmaciones */
  --color-focus:      #3B2A8C;

  --bg: var(--color-white);
  --text: var(--color-ink);

  /* --- Tipografía --- */
  --font-head: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --text-xs: .875rem;   /* 14 */
  --text-sm: 1rem;      /* 16 */
  --text-base: 1.125rem;/* 18 */
  --text-lg: 1.25rem;   /* 20 */

  /* --- Espaciado (rejilla de 4px) --- */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.25rem;
  --s6: 1.5rem; --s8: 2rem; --s10: 2.5rem; --s14: 3.5rem; --s18: 4.5rem;

  /* --- Formas (de la guía: 27.36px y píldora) --- */
  --radius: 1.71rem;
  --radius-pill: 9999px;

  --container: 70rem;
  --measure: 45rem;
  --header-h: 4rem;
}

/* --- Reset mínimo --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1rem; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 var(--text-base)/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.15; letter-spacing: .005em; margin: 0 0 var(--s4); text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 7vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 4.5vw, 2.25rem); margin-top: var(--s10); }
h3 { font-size: 1.45rem; margin-top: var(--s8); }
p, ul, ol { margin: 0 0 var(--s5); }
p, li { text-wrap: pretty; }
table, .countdown, .calc__big { font-variant-numeric: tabular-nums; }
a { color: var(--color-link); text-underline-offset: .18em; }
a:hover { color: var(--color-link-hover); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: var(--s4); top: -4rem; background: var(--color-ink); color: var(--color-cream); padding: var(--s3) var(--s5); border-radius: var(--radius-pill); z-index: 100; }
.skip-link:focus { top: var(--s3); }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s4); }
.container--narrow { max-width: calc(var(--measure) + 2rem); }

/* --- Botones e inputs --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 2.75rem; padding: var(--s2) var(--s6);
  background: var(--color-peach); color: var(--color-ink);
  border: 2px solid var(--color-ink); border-radius: var(--radius-pill);
  font: 700 var(--text-sm)/1.2 var(--font-body); text-decoration: none; cursor: pointer;
  transition: background-color .2s ease-in-out, color .2s ease-in-out, border-color .2s ease-in-out;
}
.btn:hover { background: var(--color-cream); color: var(--color-ink); }
.btn:active { background: var(--color-pink); transform: translateY(1px) scale(.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn--lg { min-height: 3.25rem; padding-inline: var(--s8); font-size: var(--text-base); }
.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--color-blush); }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.input {
  flex: 1 1 14rem; min-height: 2.75rem; padding: var(--s2) var(--s5);
  border: 2px solid var(--color-ink); border-radius: var(--radius-pill);
  font: 400 1rem/1.2 var(--font-body); color: var(--color-ink); background: var(--color-white);
}
.check { display: flex; gap: var(--s3); align-items: flex-start; font-size: var(--text-xs); line-height: 1.5; margin-top: var(--s3); }
.check input { margin-top: .2rem; width: 1.1rem; height: 1.1rem; accent-color: var(--color-ink); }

/* --- Cabecera --- */
.site-header { background: var(--color-white); border-bottom: 1px solid var(--color-border); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); gap: var(--s4); flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: var(--s3); min-height: 2.75rem; color: var(--color-ink); text-decoration: none; }
.brand__name { font: 700 1.5rem/1 var(--font-head); letter-spacing: .02em; text-transform: uppercase; }
.nav-toggle { display: none; min-height: 2.75rem; padding: 0 var(--s5); border: 2px solid var(--color-ink); border-radius: var(--radius-pill); background: var(--color-white); font: 700 var(--text-sm) var(--font-body); cursor: pointer; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); }
.site-nav a { display: inline-block; padding: var(--s2) 0; color: var(--color-ink); font-weight: 500; font-size: var(--text-sm); text-decoration: none; border-bottom: 2px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--color-ink); }
.site-nav a[aria-current] { border-bottom-color: var(--color-ink); font-weight: 700; }
.js .nav-toggle { display: inline-flex; align-items: center; }
.js .site-nav { display: none; flex-basis: 100%; padding-bottom: var(--s4); }
.js .site-nav.is-open { display: block; }
.js .site-nav ul { flex-direction: column; gap: 0; }
.js .site-nav a { padding: var(--s3) 0; display: block; border-bottom: 1px solid var(--color-border); }
@media (min-width: 62rem) {
  .js .nav-toggle { display: none; }
  .js .site-nav, .js .site-nav.is-open { display: block; flex-basis: auto; padding: 0; }
  .js .site-nav ul { flex-direction: row; gap: var(--s1) var(--s6); }
  .js .site-nav a { padding: var(--s2) 0; border-bottom: 2px solid transparent; }
  .js .site-nav a:hover { border-bottom-color: var(--color-ink); }
}

/* --- Hero --- */
.hero { background: var(--color-ink); color: var(--color-cream); padding-block: var(--s14); }
.hero__title { color: var(--color-white); max-width: 18ch; }
.hero__lead { font-size: var(--text-lg); max-width: 38rem; color: var(--color-sky); }
.eyebrow { font: 700 var(--text-xs)/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--s3); color: var(--color-muted); }
.eyebrow a { color: inherit; }
.eyebrow--light { color: var(--color-peach); }
.countdown { margin: var(--s8) 0; }
.countdown time { display: flex; gap: var(--s3); }
.countdown__cell { display: grid; place-items: center; width: 4.75rem; min-height: 5.25rem; background: var(--color-peach); color: var(--color-ink); border-radius: 1rem; }
.countdown__cell b { font: 700 2.25rem/1 var(--font-head); font-variant-numeric: tabular-nums; }
.countdown__cell small { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.countdown__note { margin: var(--s4) 0 0; font-size: var(--text-sm); color: var(--color-sky); }
.hero .btn { border-color: var(--color-peach); }
.hero .btn:hover { border-color: var(--color-cream); }

/* --- Secciones --- */
.section { padding-block: var(--s14); }
.section--tint { background: var(--color-cream); }
.section--ink { background: var(--color-ink); color: var(--color-cream); }
.section__title { margin-top: 0; }
.section__title--light { color: var(--color-white); }
.empty { padding: var(--s6); background: var(--color-blush); border-radius: var(--radius); }

.start-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s4); grid-template-columns: 1fr; }
.start-card a { display: block; height: 100%; padding: var(--s6); border-radius: var(--radius); color: var(--color-ink); text-decoration: none; border: 2px solid var(--color-ink); transition: transform .2s ease-in-out; }
.start-card a:hover { transform: translateY(-3px); box-shadow: 0 14px 24px -14px rgba(15, 12, 26, .5); }
.start-card a:active { transform: translateY(0) scale(.99); }
.start-card--1 a { background: var(--color-mint); }
.start-card--2 a { background: var(--color-peach); }
.start-card--3 a { background: var(--color-sky); }
.start-card--4 a { background: var(--color-cream); }
.start-card--5 a { background: var(--color-blush); }
.start-card__n { display: block; font: 700 1rem var(--font-head); opacity: .6; }
.start-card__title { display: block; font: 700 1.6rem/1.1 var(--font-head); margin: var(--s2) 0; }
.start-card__desc { display: block; font-size: var(--text-sm); line-height: 1.5; }

.tool-feature { display: grid; gap: var(--s8); align-items: center; }
.tool-feature__art { display: flex; gap: var(--s3); align-items: center; justify-content: center; font: 700 2.25rem var(--font-head); }
.tool-feature__art span { display: grid; place-items: center; min-width: 5rem; height: 5rem; padding-inline: var(--s3); background: var(--color-ink); color: var(--color-peach); border-radius: var(--radius); }

.card-grid { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
.guide-card { position: relative; display: flex; flex-direction: column; padding: var(--s6); border: 2px solid var(--color-border); border-radius: var(--radius); background: var(--color-white); transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out; }
.guide-card:hover { border-color: var(--color-ink); box-shadow: 0 14px 28px -16px rgba(15, 12, 26, .4); }
.guide-card:focus-within { border-color: var(--color-ink); }
.guide-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.guide-card__title a:focus-visible { outline: none; }
.guide-card:has(.guide-card__title a:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.guide-card__meta { margin-top: auto; }
.card-grid--feature .guide-card:first-child { background: var(--color-cream); border-color: var(--color-ink); }
.card-grid--feature .guide-card:first-child .guide-card__title { font-size: 1.75rem; }
@media (min-width: 40rem) { .card-grid--feature .guide-card:first-child { grid-column: span 2; } }
.guide-card__cat { font: 700 var(--text-xs) var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); margin: 0 0 var(--s2); }
.guide-card__title { font-size: 1.4rem; margin: 0 0 var(--s2); }
.guide-card__title a { color: var(--color-ink); text-decoration: none; }
.guide-card__title a:hover { text-decoration: underline; }
.guide-card__desc { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--s3); }
.guide-card__meta { font-size: var(--text-xs); color: var(--color-muted); margin: 0; }

.deal-strip { list-style: none; padding: 0; margin: 0 0 var(--s5); display: grid; gap: var(--s4); grid-template-columns: 1fr; }
.deal-strip a { display: block; padding: var(--s6); background: var(--color-cream); color: var(--color-ink); border-radius: var(--radius); text-decoration: none; }
.deal-strip a:hover { background: var(--color-peach); }
.deal-strip b { display: block; font: 700 1.4rem var(--font-head); }
.deal-strip span { font-size: var(--text-sm); }
.deal-strip__note { font-size: var(--text-xs); color: var(--color-sky); margin: 0; }
.deal-strip__note a { color: var(--color-peach); }


/* --- Páginas interiores --- */
.page-head { padding-top: var(--s5); }
.breadcrumbs ol { list-style: none; margin: 0 0 var(--s5); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1); font-size: var(--text-xs); color: var(--color-muted); }
.breadcrumbs li + li::before { content: "/"; margin-right: var(--s1); color: var(--color-muted); }
.breadcrumbs a { display: inline-block; padding: .7rem .15rem; color: var(--color-muted); }
.breadcrumbs ol { gap: 0 var(--s1); }
.breadcrumbs span[aria-current] { display: inline-block; padding: .7rem 0; }

.layout { display: grid; gap: var(--s10); padding-bottom: var(--s14); }
.layout__main { min-width: 0; max-width: var(--measure); }
.layout__side { display: none; }

.article__header { margin-bottom: var(--s6); }
.article__meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); font-size: var(--text-xs); color: var(--color-muted); margin: 0; }

.prose { font-size: var(--text-base); }
.prose h2 { margin-top: var(--s10); }
.prose li { margin-bottom: var(--s2); }
.prose img { border-radius: 1rem; display: block; margin-block: var(--s5); }
.prose img[src$=".svg"] { border-radius: 0; max-width: 100%; height: auto; }
.prose code { background: var(--color-blush); padding: .1em .35em; border-radius: .35em; font-size: .9em; }
.prose pre { overflow-x: auto; padding: var(--s4); background: var(--color-ink); color: var(--color-cream); border-radius: 1rem; }
.prose pre code { background: none; padding: 0; }
.prose blockquote { margin: var(--s6) 0; padding: var(--s4) var(--s5); border: 2px solid var(--color-ink); background: var(--color-cream); border-radius: 1rem; }
.prose blockquote p:last-child { margin: 0; }
.prose hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--s10) 0; }
.aff-pending { text-decoration: none; }

/* Tabla con scroll horizontal: sombras laterales que avisan de que hay más columnas */
.table-wrap {
  overflow-x: auto; margin-block: var(--s6); border: 2px solid var(--color-ink); border-radius: 1rem;
  background:
    linear-gradient(to right, var(--color-white) 30%, transparent) left / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--color-white) 30%, transparent) right / 2.5rem 100% no-repeat local,
    linear-gradient(to right, rgba(15, 12, 26, .22), transparent) left / .9rem 100% no-repeat scroll,
    linear-gradient(to left, rgba(15, 12, 26, .22), transparent) right / .9rem 100% no-repeat scroll;
}
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td { padding: var(--s3) var(--s4); text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: top; }
/* Celdas cortas (.nw, la marca el renderizador): sin saltos de línea; primera columna fija al hacer scroll */
.nw { white-space: nowrap; }
.table-wrap tbody td:first-child.nw { position: sticky; left: 0; z-index: 1; background: var(--color-white); box-shadow: 1px 0 0 var(--color-border); font-weight: 700; }
.table-wrap thead th:first-child.nw { position: sticky; left: 0; z-index: 1; background: var(--color-ink); }
@media (max-width: 40rem) { th, td { padding: var(--s3) var(--s3); } }
thead th { background: var(--color-ink); color: var(--color-cream); font-weight: 700; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }

.quick-answer { margin: var(--s6) 0; padding: var(--s5) var(--s6); background: var(--color-cream); border: 2px solid var(--color-ink); border-radius: var(--radius); }
.quick-answer p:last-child { margin: 0; }
.quick-answer__label { font: 700 1.1rem var(--font-head); text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--s2); }
.notice { padding: var(--s5) var(--s6); background: var(--color-blush); border-radius: var(--radius); border: 2px solid var(--color-ink); }
.notice--ok { background: var(--color-ok-bg); }
.notice--error { background: var(--color-alert-bg); border-color: var(--color-alert); }
.notice__title { font-size: 1.8rem; }
.toc { margin: var(--s6) 0; background: var(--color-sky); border-radius: var(--radius); }
.toc__title { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 3.25rem; padding: var(--s2) var(--s6); font: 700 1.1rem var(--font-head); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; list-style: none; }
.toc__title::-webkit-details-marker { display: none; }
.toc__title::after { content: "+"; font-size: 1.5rem; line-height: 1; }
.toc[open] > .toc__title::after { content: "\2212"; }
.toc ol { margin: 0; padding: 0 var(--s6) var(--s4) calc(var(--s6) + 1.25rem); }
.toc li { margin: 0; }
.toc a { display: inline-block; padding: .6rem 0; color: var(--color-ink); }

.faq h3 { font-size: 1.25rem; margin-top: var(--s6); }
.author-box { display: flex; gap: var(--s4); align-items: flex-start; margin-block: var(--s10); padding: var(--s5); border: 2px solid var(--color-border); border-radius: var(--radius); }
.author-box__avatar { flex: none; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; background: var(--color-ink); color: var(--color-peach); border-radius: 50%; font: 700 1.5rem var(--font-head); }
.author-box__name { font-weight: 700; margin: 0; }
.author-box__bio { font-size: var(--text-sm); color: var(--color-muted); margin: var(--s1) 0 0; }
.related { padding: var(--s6); background: var(--color-mint); border-radius: var(--radius); }
.related h2 { margin-top: 0; font-size: 1.6rem; }
.related ul { margin: 0; padding-left: 1.25rem; }
.related a { color: var(--color-ink); }
.topic-grid { list-style: none; padding: 0; display: grid; gap: var(--s3); grid-template-columns: 1fr; }
.topic-grid a { display: block; padding: var(--s4) var(--s5); border: 2px solid var(--color-ink); border-radius: 1rem; color: var(--color-ink); text-decoration: none; background: var(--color-cream); }
.topic-grid a:hover { background: var(--color-peach); }

/* --- Calculadora --- */
.notice--warn { background: var(--color-cream); margin-bottom: var(--s6); }
.notice p:last-child { margin-bottom: 0; }
.calc { display: grid; gap: var(--s5); padding: var(--s6); background: var(--color-sky); border: 2px solid var(--color-ink); border-radius: var(--radius); margin-bottom: var(--s6); }
.calc__group { border: 0; padding: 0; margin: 0; min-width: 0; }
.calc__group legend { font: 700 1.25rem var(--font-head); margin-bottom: var(--s3); padding: 0; }
.calc__label { display: block; font-size: var(--text-sm); font-weight: 500; margin: var(--s3) 0 var(--s1); }
.calc .input { width: 100%; }
.calc__hint { font-size: var(--text-xs); color: var(--color-muted); margin: var(--s2) 0 0; }
.calc__chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip { min-height: 2.75rem; padding: 0 var(--s5); border: 2px solid var(--color-ink); border-radius: var(--radius-pill); background: var(--color-white); color: var(--color-ink); font: 700 var(--text-sm) var(--font-body); cursor: pointer; transition: background-color .2s ease-in-out; }
.chip:hover { background: var(--color-cream); }
.chip[aria-pressed="true"] { background: var(--color-ink); color: var(--color-cream); }
.calc__error { margin: 0; padding: var(--s3) var(--s4); background: var(--color-alert-bg); color: var(--color-alert); border-radius: 1rem; font-weight: 500; }
.calc__result { padding: var(--s5); background: var(--color-white); border: 2px solid var(--color-ink); border-radius: var(--radius); min-height: 14rem; }
.calc__result-label { font: 700 var(--text-xs) var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); margin: 0; }
.calc__big { font: 700 clamp(2.5rem, 9vw, 3.5rem)/1.1 var(--font-head); margin: var(--s2) 0 0; }
.calc__result-sub { color: var(--color-muted); font-size: var(--text-sm); margin-bottom: var(--s4); }
.calc__table { font-size: var(--text-sm); }
.calc__table th[scope="row"] { font-weight: 500; }

/* --- Pie --- */
.site-footer { background: var(--color-ink); color: var(--color-cream); padding-block: var(--s14) var(--s8); font-size: var(--text-sm); }
.site-footer a { color: var(--color-cream); }
.site-footer__grid { display: grid; gap: var(--s8); grid-template-columns: 1fr; margin-bottom: var(--s8); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: 0; }
.site-footer li a, .site-footer .link-button { display: inline-block; padding: .65rem 0; min-height: 2.75rem; }
.deal-strip__note a { display: inline-block; padding: .65rem 0; }
.site-footer__brand { font: 700 1.6rem var(--font-head); text-transform: uppercase; margin: 0 0 var(--s2); color: var(--color-peach); }
.site-footer__title { font: 700 1rem var(--font-head); text-transform: uppercase; letter-spacing: .08em; color: var(--color-peach); margin-bottom: var(--s3); }
.site-footer__tag { margin: 0; color: var(--color-sky); }
.site-footer__legal { padding-top: var(--s6); border-top: 1px solid rgba(255, 249, 203, .25); margin: 0 0 var(--s2); }
.site-footer__copy { margin: 0; font-size: var(--text-xs); color: var(--color-sky); }

/* --- Banner de cookies (fixed: no provoca CLS) --- */
.cookie { position: fixed; inset: auto 0 0 0; z-index: 1000; padding: var(--s3); }
.cookie[hidden] { display: none; }
.cookie__inner { max-width: 48rem; margin-inline: auto; padding: var(--s5) var(--s6); background: var(--color-white); border: 2px solid var(--color-ink); border-radius: var(--radius); box-shadow: 0 8px 30px rgba(15, 12, 26, .25); }
.cookie__title { font: 700 1.25rem var(--font-head); margin-bottom: var(--s2); }
.cookie__text { font-size: var(--text-sm); margin-bottom: var(--s4); }
.cookie__actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.cookie__actions .btn { flex: 1 1 9rem; }
.cookie__custom { margin-bottom: var(--s4); }

/* --- Huecos de anuncio: espacio reservado (min-height) para evitar CLS ---
   Mientras ads_enabled sea false no se muestran (evita huecos vacíos sin anuncios). */
.ad-slot { display: none; }
.ads-on .ad-slot { display: block; width: 100%; margin: var(--s6) auto; overflow: hidden; text-align: center; }
.ads-on .ad-slot--inline { min-height: 280px; }
.ads-on .ad-slot--sidebar { min-height: 600px; margin: 0; }
.ads-on .ad-slot--anchor { position: fixed; inset: auto 0 0 0; z-index: 900; min-height: 56px; margin: 0; background: var(--color-white); border-top: 1px solid var(--color-border); }
.ads-on { padding-bottom: 56px; }
.ads-debug .ad-slot { background: repeating-linear-gradient(45deg, #fff, #fff 10px, var(--color-blush) 10px, var(--color-blush) 20px); outline: 2px dashed var(--color-muted); outline-offset: -2px; }
.ads-debug .ad-slot::before { content: "AD · " attr(data-slot); display: block; padding-top: var(--s3); font: 700 var(--text-xs) var(--font-body); color: var(--color-muted); }

/* --- Tablet / escritorio --- */
@media (min-width: 40rem) {
  .start-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid, .deal-strip { grid-template-columns: repeat(2, 1fr); }
  .topic-grid { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62rem) {
  .container { padding-inline: var(--s6); }
  .start-grid { grid-template-columns: repeat(6, 1fr); }
  .start-card { grid-column: span 2; }
  .start-card:nth-child(n+4) { grid-column: span 3; }
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .card-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .deal-strip { grid-template-columns: repeat(3, 1fr); }
  .tool-feature { grid-template-columns: 1.3fr 1fr; }
  .site-footer__grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
  .layout { grid-template-columns: minmax(0, var(--measure)) 18.75rem; justify-content: space-between; }
  .layout__side { display: block; }
  .sticky { position: sticky; top: var(--s4); }
  .ads-on .ad-slot--anchor { display: none; }
  .ads-on { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}
@media print {
  .site-header, .site-footer, .cookie, .ad-slot { display: none !important; }
}

/* --- Engagement: siguiente paso, aviso a mitad de artículo, compartir, volver arriba --- */
.next { margin-block: var(--s10); }
.next h2 { margin-top: 0; font-size: 1.6rem; }
.next__card { position: relative; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s6); background: var(--color-peach); color: var(--color-ink); border: 2px solid var(--color-ink); border-radius: var(--radius); text-decoration: none; transition: transform .25s ease-out, box-shadow .25s ease-out; }
.next__card:hover { transform: translateY(-3px); box-shadow: 0 16px 26px -16px rgba(15, 12, 26, .55); color: var(--color-ink); }
.next__card:active { transform: scale(.99); }
.next__title { font: 700 1.7rem/1.15 var(--font-head); }
.next__desc { font-size: var(--text-sm); line-height: 1.5; }
.next__go { display: inline-flex; align-items: center; gap: var(--s2); margin-top: var(--s2); font-weight: 700; font-size: var(--text-sm); }

.keep-reading { margin: var(--s8) 0; padding: var(--s4) var(--s5); background: var(--color-sky); border-radius: 1rem; }
.keep-reading p { margin: 0; font-size: var(--text-sm); }
.keep-reading a { display: inline-block; padding: .3rem 0; color: var(--color-ink); font-weight: 700; }

.quick-answer__jump { margin: var(--s3) 0 0; font-size: var(--text-sm); }
.quick-answer__jump a { display: inline-block; padding: .65rem 0; color: var(--color-ink); font-weight: 700; }

.share { margin-block: var(--s10); padding: var(--s5) var(--s6); border: 2px solid var(--color-border); border-radius: var(--radius); }
.share__title { margin: 0 0 var(--s1); font-size: 1.4rem; }
.share__hint { margin: 0 0 var(--s4); font-size: var(--text-sm); color: var(--color-muted); }
.share__row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.share__btn { display: inline-flex; align-items: center; gap: var(--s2); min-height: 2.75rem; padding: 0 var(--s4); background: var(--color-white); color: var(--color-ink); border: 2px solid var(--color-ink); border-radius: var(--radius-pill); font: 700 var(--text-sm) var(--font-body); text-decoration: none; cursor: pointer; transition: background-color .2s ease-in-out; }
.share__btn:hover { background: var(--color-cream); color: var(--color-ink); }
.share__btn:active { transform: translateY(1px) scale(.98); }
.share__status { min-height: 1.5em; margin: var(--s3) 0 0; font-size: var(--text-sm); color: var(--color-muted); }

.card-grid--related { grid-template-columns: 1fr; }
.related__all { margin: var(--s4) 0 0; }
.related__all a { display: inline-block; padding: .5rem 0; color: var(--color-ink); font-weight: 700; }

.to-top { position: fixed; right: var(--s4); bottom: var(--s4); z-index: 800; display: grid; place-items: center; width: 3rem; height: 3rem; background: var(--color-ink); color: var(--color-cream); border-radius: 50%; border: 2px solid var(--color-peach); box-shadow: 0 8px 20px -8px rgba(15, 12, 26, .6); }
.to-top[hidden] { display: none !important; }
.ads-on .to-top { bottom: 4.5rem; }
@media (min-width: 62rem) { .ads-on .to-top { bottom: var(--s4); } }
@media (min-width: 40rem) { .card-grid--related { grid-template-columns: repeat(3, 1fr); } }
@media print { .share, .to-top, .keep-reading { display: none !important; } }

/* Marca más larga ("GTA 6 Console Setup"): que quepa junto al botón Menu en móvil */
@media (max-width: 30rem) {
  .brand { gap: var(--s2); }
  .brand__mark { width: 28px; height: 28px; }
  .brand__name { font-size: 1.1rem; letter-spacing: .01em; }
  .nav-toggle { padding: 0 var(--s4); }
}