/* Crítico: tokens, cabecera, ficha, carril, héroe y reproductor.
   Va en el <head> y bloquea el primer pintado.
   El resto está en sitio.css y se puede cargar después. */

:root {
    color-scheme: dark;
    --ink: #f4f7fb;
    --muted: #9aabc0;
    --blue: #7af0ff;
    --play: #ffe14a;
    --play-ink: #1a1400;
    --paper: #0c1222;
    --card: #151d31;
    --line: rgba(255,255,255,.14);
    --bar: #10192e;
    --bar-line: rgba(122, 240, 255, .28);
    --btn: #182238;
    --btn-line: rgba(122, 240, 255, .35);
    --panel: #0c1426;
    --menu-link: #151d31;
    --veil: rgba(4, 8, 16, .55);
    --chip: rgba(255,255,255,.06);
    --shot: #1a2438;
    --arrow: #1a2438;
    --hero-line: rgba(122, 240, 255, .18);
    --glow-a: rgba(122, 240, 255, .09);
    --glow-b: rgba(255, 225, 74, .07);
    --on-bar: #fff;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --page: 2040px;
    --foto: 1.1;
  }
  html[data-theme="light"] {
    color-scheme: light;
    --ink: #14324a;
    --muted: #4d6a84;
    --blue: #0b67b8;
    --play: #ffe14a;
    --play-ink: #1a1400;
    --paper: #d4ebfb;
    --card: #ffffff;
    --line: rgba(20, 50, 74, .12);
    --bar: #1f7ad4;
    --bar-line: rgba(255, 255, 255, .28);
    --btn: rgba(255, 255, 255, .16);
    --btn-line: rgba(255, 255, 255, .45);
    --panel: #ffffff;
    --menu-link: #d7ebfb;
    --veil: rgba(20, 50, 74, .32);
    --chip: #e7f4ff;
    --shot: #c5e2f6;
    --arrow: #ffffff;
    --hero-line: rgba(31, 122, 212, .16);
    --glow-a: rgba(255, 255, 255, .55);
    --glow-b: rgba(160, 210, 245, .4);
    --on-bar: #fff;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; scrollbar-gutter: stable; }
  body {
    margin: 0;
    padding-top: 65px;
    padding-bottom: 0;
    background:
      radial-gradient(820px 380px at 0% -10%, var(--glow-a), transparent 60%),
      radial-gradient(640px 320px at 100% 0%, var(--glow-b), transparent 55%),
      var(--paper);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.4;
  }
  a { color: inherit; }
  img { max-width: 100%; height: auto; }
  .topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 25;
    background: var(--bar);
    color: var(--on-bar);
    border-bottom: 1px solid var(--bar-line);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  }
  .topbar .wrap.bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    min-height: 64px;
  }
  .menu-slot { position: relative; width: 40px; height: 40px; }
  .menu-btn {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    background: var(--btn);
    color: var(--on-bar);
    border: 1px solid var(--btn-line);
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
  }
  .bars {
    position: absolute;
    left: 12px;
    top: 19px;
    width: 16px;
    height: 2px;
    background: white;
    border-radius: 2px;
    pointer-events: none;
  }
  .bars::before, .bars::after {
    content: "";
    position: absolute;
    left: 0;
    width: 16px;
    height: 2px;
    background: white;
    border-radius: 2px;
  }
  .bars::before { top: -5px; }
  .bars::after { top: 5px; }
  #menu-open:checked + .bars { background: transparent; }
  #menu-open:checked + .bars::before { top: 0; transform: rotate(45deg); }
  #menu-open:checked + .bars::after { top: 0; transform: rotate(-45deg); }
  .logo { justify-self: center; }
  .menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 30;
    width: min(320px, 86vw);
    height: 100%;
    margin: 0;
    padding: 16px 16px 24px;
    background: var(--panel);
    color: var(--ink);
    box-shadow: 16px 0 40px rgba(0, 0, 0, .45);
    transform: translateX(-105%);
    transition: transform .22s ease;
    overflow: auto;
  }
  .menu { visibility: hidden; }
  body:has(#menu-open:checked) .menu { visibility: visible; transform: translateX(0); }
  .menu-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 20;
    background: var(--veil);
  }
  body:has(#menu-open:checked) .menu-backdrop { display: block; }
  .menu-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 0 14px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--menu-link);
    color: var(--ink);
    cursor: pointer;
  }
  .menu-close svg { display: block; }
  .menu-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .menu-list a {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-weight: 700;
    background: var(--menu-link);
    color: var(--ink);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .22);
  }
  .menu-list a:hover { color: var(--blue); }
  .logo img {
    display: block;
    height: 42px;
    width: auto;
  }
  .bar-end {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .theme {
    position: relative;
    width: 58px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    cursor: pointer;
    color: rgba(255,255,255,.55);
  }
  .theme svg {
    position: absolute;
    top: 8px;
    width: 16px;
    height: 16px;
    z-index: 1;
  }
  .theme .sun { left: 8px; }
  .theme .moon { right: 8px; }
  .theme-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--play);
    transform: translateX(26px);
    transition: transform .2s ease;
  }
  html[data-theme="light"] .theme-knob { transform: translateX(0); }
  html:not([data-theme="light"]) .theme .moon,
  html[data-theme="light"] .theme .sun { color: var(--play-ink); }
  .fav { position: relative; width: 40px; height: 40px; }
  .fav-btn {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--btn-line);
    border-radius: 999px;
    background: var(--btn);
    color: var(--on-bar);
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
  }
  .fav-ico {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--on-bar);
    pointer-events: none;
  }
  .fav-ico svg { display: block; }
  #fav-open:checked ~ .fav-ico,
  #cuenta-open:checked ~ .fav-ico,
  .cuenta.is-in .fav-ico { color: var(--play); }
  .fav-catch { display: none; position: fixed; inset: 0; z-index: 24; }
  #fav-open:checked ~ .fav-catch,
  #cuenta-open:checked ~ .fav-catch { display: block; }
  .fav-panel {
    position: fixed;
    top: 74px;
    right: max(24px, calc((100vw - var(--page)) / 2));
    z-index: 26;
    width: min(320px, calc(100vw - 24px));
    max-height: min(420px, calc(100vh - 90px));
    overflow: auto;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel);
    color: var(--ink);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
    display: none;
  }
  #fav-open:checked ~ .fav-panel,
  #cuenta-open:checked ~ .fav-panel { display: block; }
  .cuenta-link {
    display: block;
    width: calc(100% - 8px);
    margin: 4px;
    padding: 12px 14px;
    border: 0;
    border-radius: 12px;
    background: var(--chip);
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
  }
  .cuenta-link:hover { color: var(--blue); }
  .fav-panel p {
    margin: 4px 8px 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
  }
  .fav-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--ink);
  }
  .fav-row:hover { background: var(--chip); }
  .fav-row img {
    width: 72px;
    height: 54px;
    object-fit: cover;
    border-radius: 8px;
    background: var(--shot);
  }
  .fav-row strong { display: block; font-size: 14px; color: var(--ink); }
  .fav-row span span { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 700; }
  .buscar {
    display: none;
    color: var(--on-bar);
    text-decoration: none;
    font-weight: 700;
    border: 2px solid rgba(255,255,255,.7);
    border-radius: 999px;
    padding: 6px 14px;
  }
  .buscar:hover { background: rgba(255,255,255,.12); }
  .buscar-form {
    position: relative;
    display: flex;
    align-items: center;
    width: 240px;
    height: 40px;
    border: 2px solid rgba(255,255,255,.7);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
  }
  .buscar-form input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    color: var(--on-bar);
    font: inherit;
    font-weight: 700;
    padding: 0 4px 0 14px;
    outline: none;
  }
  .buscar-form input::placeholder { color: rgba(255,255,255,.72); font-weight: 700; }
  .buscar-form button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-right: 3px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--on-bar);
    cursor: pointer;
  }
  .buscar-form button:hover { background: rgba(255,255,255,.12); }
  .buscar-form:focus-within {
    outline: 3px solid #7af0ff;
    outline-offset: 3px;
  }
  .suggest {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 26;
    width: 320px;
    max-height: min(420px, calc(100vh - 90px));
    overflow: auto;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel);
    color: var(--ink);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
  }
  .suggest[hidden] { display: none; }
  .suggest p {
    margin: 4px 8px 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
  }
  .wrap {
    width: min(var(--page), calc(100% - 48px));
    margin: 0 auto;
  }
  .chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0 14px;
    scrollbar-width: none;
  }
  .chips::-webkit-scrollbar { display: none; }
  .band {
    margin: 22px 0;
    padding: 16px 20px 18px;
    border-radius: 22px;
    background: var(--band);
  }
  main.wrap > .band:first-child,
  main.wrap > .listing:first-child { margin-top: 36px; }
  .band-resume { --band: #163044; }
  .band-new { --band: #12383a; }
  .band-hallow { --band: #2c2144; }
  .band-pick { --band: #143428; }
  .band-top { --band: #1b2744; }
  .band-accion { --band: #1b2744; }
  .band-aventuras { --band: #1a3040; }
  .band-carreras { --band: #2a2618; }
  .band-deportes { --band: #143028; }
  .band-chicas { --band: #2c2030; }
  .band-mesa { --band: #1e2836; }
  .band-habilidad { --band: #18283c; }
  .band-infantiles { --band: #243218; }
  html[data-theme="light"] .band-resume { --band: #d5e6f6; }
  html[data-theme="light"] .band-new { --band: #d3efe8; }
  html[data-theme="light"] .band-hallow { --band: #eadff6; }
  html[data-theme="light"] .band-pick { --band: #dcefd4; }
  html[data-theme="light"] .band-top { --band: #e4e8f6; }
  html[data-theme="light"] .band-accion { --band: #e4e8f6; }
  html[data-theme="light"] .band-aventuras { --band: #d7e8f2; }
  html[data-theme="light"] .band-carreras { --band: #f3ead4; }
  html[data-theme="light"] .band-deportes { --band: #d7efe4; }
  html[data-theme="light"] .band-chicas { --band: #f6e4ee; }
  html[data-theme="light"] .band-mesa { --band: #e6ebf4; }
  html[data-theme="light"] .band-habilidad { --band: #dce6f6; }
  html[data-theme="light"] .band-infantiles { --band: #e8f0d8; }
  .band .sec-head { margin: 0 0 14px; }
  .sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 28px 0 12px;
  }
  .sec-title {
    font-family: var(--font);
    font-weight: 700;
    font-size: 26px;
    margin: 0;
  }
  .sec-title a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
  }
  .sec-title a::after {
    content: ">";
    font-family: system-ui, sans-serif;
    font-weight: 700;
  }
  .sec-title a:hover { color: var(--blue); }
  .sec-head .meta { color: var(--muted); font-size: 14px; }
  .rail-box { position: relative; }
  .arrows {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease;
  }
  .arrows button {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 0;
    background: rgba(8, 12, 22, .72);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    pointer-events: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
  }
  .band:hover .arrows,
  .band:focus-within .arrows { opacity: 1; }
  .band:hover .arrows button,
  .band:focus-within .arrows button { pointer-events: auto; }
  .arrows button:hover { background: rgba(8, 12, 22, .9); color: var(--blue); }
  .band:has(.arrows) {
    view-timeline-name: --section;
    view-timeline-axis: block;
  }
  @keyframes arrows-here { from, to { opacity: 1; } }
  @keyframes arrows-hit { from, to { pointer-events: auto; } }
  @media (hover: none) {
    .band .arrows {
      animation: arrows-here linear;
      animation-timeline: --section;
      animation-range: cover 22% cover 78%;
    }
    .band .arrows button {
      animation: arrows-hit linear;
      animation-timeline: --section;
      animation-range: cover 22% cover 78%;
    }}
  .rail {
    --cell: 176px;
    display: grid;
    grid-auto-flow: column dense;
    grid-template-rows: calc(var(--cell) * 3 / 4) calc(var(--cell) * 3 / 4);
    grid-auto-columns: var(--cell);
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 12px;
    margin-inline: -12px;
    padding: 10px 12px 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .rail.mini {
    --cell: 118px;
    grid-template-rows: calc(var(--cell) * 3 / 4);
    gap: 10px;
  }
  .rail.mini .title { font-size: 13px; }
  .rail.mini .name { padding: 34px 8px 6px; }
  .rail.mini .meta { margin-top: 3px; font-size: 11px; }
  .rail.one {
    grid-auto-flow: column;
    grid-template-rows: calc(var(--cell) * 3 / 4);
    grid-auto-columns: var(--cell);
  }
  .rail.one .card,
  .rail-slim > .card,
  .rail.mini > .card { height: 100%; }
  .rail-slim,
  .rail.mini {
    grid-auto-flow: column;
    grid-template-rows: calc(var(--cell) * 3 / 4);
    grid-auto-columns: var(--cell);
  }
  .rail-wrap {
    grid-auto-flow: row dense;
    grid-template-rows: none;
    grid-template-columns: repeat(auto-fill, var(--cell));
    grid-auto-rows: calc(var(--cell) * 3 / 4);
    grid-auto-columns: unset;
    width: 100%;
    overflow: visible;
    margin-inline: 0;
  }
  #seguir[hidden] { display: none; }
html[data-theme="light"] .seo {
    background: #fff;
    border-color: rgba(20, 36, 64, .1);
  }
.seo a { color: var(--blue); font-weight: 700; }
.seo a:hover { text-decoration: underline; text-underline-offset: 3px; }
.seo .crumbs a { color: var(--ink); text-decoration: none; }
.seo .crumbs a:hover { color: var(--blue); text-decoration: none; }
.seo-types a { color: var(--ink); text-decoration: none; }
.seo-types a:hover { color: var(--blue); }
html[data-theme="light"] .tile {
    background: #fff;
    border-color: rgba(20, 99, 181, .28);
    color: #1463b5;
  }
html[data-theme="light"] .tile:hover {
    background: #e7f1fb;
    border-color: #1463b5;
  }
  body:has(.resume-toggle) { padding-bottom: 84px; }
  .resume-toggle {
    position: fixed;
    left: 50%;
    bottom: 16px;
    z-index: 15;
    transform: translateX(-50%);
    border: 0;
    background: var(--play);
    color: var(--play-ink);
    font: inherit;
    font-weight: 700;
    border-radius: 999px;
    padding: 10px 16px;
    cursor: pointer;
    white-space: nowrap;
  }
  .resume-toggle:hover { background: #fff1a8; }
  .resume-check {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
  }
  .resume-check:focus-visible + .resume-toggle {
    outline: 3px solid #7af0ff;
    outline-offset: 3px;
  }
  .resume-toggle .when-off { display: none; }
  body:not(:has(#resume-open:checked)) #personales { display: none; }
  body:not(:has(#resume-open:checked)) .resume-toggle .when-on { display: none; }
  body:not(:has(#resume-open:checked)) .resume-toggle .when-off { display: inline; }
  .rail::-webkit-scrollbar { display: none; }
  .card,
  .card.md,
  .card.lg {
    position: relative;
    display: block;
    width: auto;
    min-width: 0;
    min-height: 0;
    text-decoration: none;
    scroll-snap-align: start;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .38);
  }
  .card.big {
    grid-column: span 2;
    grid-row: span 2;
  }
  .card.big .title { font-size: 26px; }
  .card.big .name { padding: 64px 14px 14px; }
.sub-cover .shot img { object-fit: cover; }
.seo-body {
    display: grid;
    grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    margin-top: 18px;
  }
.sub-cover .name { opacity: 1; transform: none; }
.sub-cover .meta { display: none; }
.card.sub-cover {
    cursor: default;
    pointer-events: none;
    box-shadow: inset 0 0 0 2px rgba(122, 240, 255, .7), 0 10px 22px rgba(0, 0, 0, .38);
  }
.card.sub-cover .title {
    font-size: 32px;
    line-height: 1.05;
    letter-spacing: -.03em;
    white-space: normal;
  }
.card.sub-cover.big .title { font-size: 80px; }
.card.sub-cover .shot::after {
    content: none;
  }
.card.sub-cover .shot img { transition: none; }
.card.sub-cover .name {
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
    padding: 8px 10px;
    background: none;
    text-align: center;
  }
.card.sub-cover:hover, .card.sub-cover:hover img {
    transform: none;
    box-shadow: inset 0 0 0 2px rgba(122, 240, 255, .7), 0 10px 22px rgba(0, 0, 0, .38);
    z-index: auto;
  }
  #lista.home-size {
    --cell: calc(176px * var(--foto, 1.1));
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--cell));
    grid-auto-rows: calc(var(--cell) * 3 / 4);
    gap: 12px;
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    justify-content: start;
  }
  #lista.home-size .card { height: 100%; aspect-ratio: auto; }
  @media (max-width: 740px) {
    #lista.home-size { --cell: calc(148px * var(--foto, 1.1)); }
    .rail-wrap {
      grid-auto-flow: column;
      grid-template-columns: none;
      grid-template-rows: calc(var(--cell) * 3 / 4);
      grid-auto-columns: var(--cell);
      grid-auto-rows: auto;
      overflow-x: auto;
      width: auto;
      margin-inline: -12px;
    }}
  .card:hover {
    box-shadow: 0 0 0 2px #7af0ff, 0 14px 26px rgba(0, 0, 0, .45);
    z-index: 2;
  }
  html[data-theme="light"] .card,
  html[data-theme="light"] .card.md,
  html[data-theme="light"] .card.lg {
    box-shadow: 0 1px 2px rgba(23, 42, 70, .16), 0 0 0 1px rgba(23, 42, 70, .08);
  }
  html[data-theme="light"] .card:hover {
    box-shadow: 0 0 0 2px #1463b5, 0 3px 6px rgba(23, 42, 70, .14);
  }
html[data-theme="light"] .sub-cover:hover {
    box-shadow: inset 0 0 0 2px rgba(20, 99, 181, .7), 0 1px 2px rgba(23, 42, 70, .16), 0 0 0 1px rgba(23, 42, 70, .08);
  }
html[data-theme="light"] .card.sub-cover {
    box-shadow: inset 0 0 0 2px rgba(20, 99, 181, .7), 0 1px 2px rgba(23, 42, 70, .16), 0 0 0 1px rgba(23, 42, 70, .08);
  }
  .shot,
  .card.md .shot,
  .card.lg .shot {
    position: absolute;
    inset: 0;
    background: var(--shot);
  }
  .shot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform .25s ease;
  }
  .card:hover img { transform: scale(1.2); }
.card.sub-cover:hover img { transform: none; }
  .name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 42px 10px 9px;
    color: white;
    background: linear-gradient(to top, rgba(6, 10, 20, .96) 28%, rgba(6, 10, 20, .72) 68%, transparent 100%);
  }
  .title {
    display: block;
    font-family: var(--font);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.12;
    letter-spacing: .01em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .65);
  }
  .meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
  }
  .rate { display: flex; align-items: center; gap: 4px; order: 2; }
  .like { font-size: 14px; line-height: 1; }
  .votes { color: #ffe14a; }
  .cats {
    order: 1;
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 2px 8px;
    border-radius: 999px;
    background: #1463b5;
    color: #fff;
    line-height: 1.3;
  }
  @media (hover: hover) and (pointer: fine) {
    .name {
      opacity: 0;
      transform: translateY(6px);
      transition: opacity .16s ease, transform .16s ease;
    }
    .card:hover .name,
    .card:focus-within .name {
      opacity: 1;
      transform: none;
    }
    .card:hover .title,
    .card:focus-within .title {
      text-shadow: 0 0 10px rgba(122, 240, 255, .9), 0 2px 8px rgba(0, 0, 0, .7);
    }
.card.sub-cover .name, .card.sub-cover:hover .name {
      opacity: 1;
      transform: none;
    }
.card.sub-cover:hover .title { text-shadow: 0 2px 8px rgba(0, 0, 0, .65); }}
  @media (hover: none) {
    .meta { display: none; }
    .title {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }}
  .key, .tag {
    position: absolute;
    left: 6px;
    top: 6px;
    background: rgba(8, 12, 24, .82);
    color: #7af0ff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    border-radius: 999px;
    padding: 2px 7px;
  }
  .tag { left: auto; right: 6px; bottom: auto; top: 6px; background: var(--play); color: var(--play-ink); }
  .key { display: none; }
.card:focus-visible, .seo a:focus-visible, .sec-title a:focus-visible, .buscar:focus-visible, .arrows button:focus-visible, .menu-btn:focus-visible, .menu-close:focus-visible, .menu-list a:focus-visible, .fav-btn:focus-visible, .fav-row:focus-visible, .theme:focus-visible, .resume-toggle:focus-visible {
    outline: 3px solid #7af0ff;
    outline-offset: 3px;
  }
  @media (max-width: 740px) {
    .wrap { width: calc(100% - 24px); }
    .fav-panel { right: 12px; }
    .rail { --cell: 148px; }
    .rail.mini { --cell: 104px; }
    .resume-toggle { padding: 10px 12px; font-size: 14px; }
    .logo img { height: 34px; }
    .buscar-form { display: none; }
    .buscar { display: inline-block; }
.seo-body { grid-template-columns: 1fr; }
.seo-body .seo-pic { width: min(100%, 280px); }
    .key {
      display: grid;
      place-items: center;
      width: 28px;
      height: 22px;
      padding: 0;
      font-size: 0;
    }
    .key::before {
      content: "";
      width: 16px;
      height: 12px;
      background: center / contain no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'><rect x='1' y='1' width='14' height='10' rx='1.6' fill='none' stroke='%237af0ff' stroke-width='1.4'/><path d='M3.2 4.2h1.2M6.2 4.2h1.2M9.2 4.2h1.2M12 4.2h1.2M3.2 7.4h1.2M5.6 7.4h4.8M11.6 7.4h1.2' stroke='%237af0ff' stroke-width='1.2' stroke-linecap='round'/></svg>");
    }}
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .shot img { transition: none; }
    .card:hover img { transform: none; }
    .name { transition: none; }
    .menu { transition: none; }
    .theme-knob { transition: none; }
    .play-btn .play-ico { transition: none; }
    .play-btn:hover .play-pill { transform: none; }
    .band .arrows, .band .arrows button { animation: none; }}
  @media (prefers-reduced-motion: reduce) and (hover: none) {
    .band .arrows { opacity: 1; }
    .band .arrows button { pointer-events: auto; }}
  .crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 12px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
  }
  .crumbs a { color: var(--ink); text-decoration: none; }
  .crumbs a:hover { color: var(--blue); }
  .page-head {
    margin: 28px 0 4px;
  }
  .home-4 .page-head { padding-inline: 20px; }
  .page-head .head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
  }
  .page-head .head-copy { min-width: 0; }
  .page-head .head-title { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
  .page-head .head-title h1 { margin: 0; }
  .page-head .page-ico { flex: none; font-size: clamp(28px, 3.4vw, 40px); line-height: 1; }
  .page-head .crumbs { margin: 0 0 10px; }
  .page-head h1 {
    margin: 0 0 8px;
    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.05;
    letter-spacing: -.03em;
  }
  .page-head + .band,
  .page-head + .listing { margin-top: 18px; }
  .lede { margin: 0; max-width: 68ch; color: var(--muted); font-size: 18px; line-height: 1.35; }
.seo > .seo-body:first-child { margin-top: 0; }
.strip .card { height: 100%; }
  .listing {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 12px;
  }
  .listing .card { aspect-ratio: 4 / 3; }
  #lista {
    justify-content: start;
  }
  #lista .card { aspect-ratio: auto; }
  .listing .card[hidden] { display: none; }
.pager + .page-head { margin-top: 28px; }
.pager a {
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
  }
html[data-theme="light"] .pager :is(a, span, button)[aria-current="page"] { color: #fff; }
.pager a:hover { border-color: var(--blue); }
  .ad-leader { width: min(728px, 100%); height: 90px; margin: 14px auto 0; }
  .ad-mrec { width: 300px; max-width: 100%; height: 250px; }
  .ad-half { width: 300px; max-width: 100%; height: 600px; margin: 14px auto 0; }
  .ad-mobile { display: none; }
  .play-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 18px;
    align-items: start;
    margin-top: 8px;
  }
  .play-layout > * { min-width: 0; }
  .play-shell {
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--line);
  }
  .player {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 0;
    overflow: hidden;
    background: #070b14;
  }
  .player img, .player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }
  .player img { object-fit: cover; }
  .play-btn {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border: 0;
    background: linear-gradient(to top, rgba(6,10,20,.55), rgba(6,10,20,.12));
    color: #1a1400;
    font: inherit;
    cursor: pointer;
  }
  .play-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 0 28px 0 18px;
    border-radius: 999px;
    background: linear-gradient(#fff3a8, #ffe14a 42%, #e6ac00);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .4);
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -.02em;
    transition: transform .16s ease;
  }
  .play-btn .play-ico { display: block; flex: 0 0 auto; }
  .play-btn:hover .play-pill { transform: scale(1.06); }
  .play-btn:active .play-pill { transform: scale(.97); }
  .play-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 8px 10px;
    border-radius: 0;
    background: var(--card);
    border: 0;
    border-top: 1px solid var(--line);
  }
  .play-bar > img {
    width: 64px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    flex: 0 0 auto;
  }
  .play-name {
    margin: 0;
    min-width: 0;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .play-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
    flex: 0 0 auto;
  }
  .play-actions button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--chip);
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
  }
  .play-actions .vote-n { font-variant-numeric: tabular-nums; }
  .play-actions #fav-juego,
  .play-actions #pantalla { width: 40px; padding: 0; }
  .play-actions button:hover { border-color: var(--blue); }
  .play-actions button[aria-pressed="true"] {
    background: var(--play);
    color: var(--play-ink);
    border-color: transparent;
  }
  .play-bar + .page-head { margin-top: 18px; }
html[data-theme="light"] .seo.game-copy {
    background: #fff;
    border-color: rgba(20, 36, 64, .1);
  }
.near-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #070b14;
  }
.game-side img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 22px 36px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255, 255, 255, .08);
  }
html[data-theme="light"] .game-side img {
    box-shadow: 0 16px 28px rgba(20, 36, 64, .16), 0 0 0 1px rgba(20, 36, 64, .08);
  }
.game-head {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 18px 28px;
    align-items: center;
  }
.game-head h1 {
    margin: 0;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.05;
  }
.game-head .crumbs { margin: 0 0 8px; }
.walk-stage {
    position: relative;
    width: min(100%, 720px);
    aspect-ratio: 16 / 9;
    margin-top: 12px;
    border-radius: 16px;
    overflow: hidden;
    background: #070b14;
  }
.walk-stage iframe, .walk-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }
.rate-line { margin: 0 0 12px; font-weight: 700; }
.walk-face img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }
.walk-face img { object-fit: cover; object-position: center; }
  @media (max-width: 900px) {
    .play-layout { grid-template-columns: 1fr; }
    .ad-col { display: none; }
    .ad-mobile { display: grid; }
    .ad-mrec { margin: 14px auto 0; }
  }
  @media (max-width: 740px) {
    .page-head h1 { font-size: 30px; }
    .game-head { grid-template-columns: 128px minmax(0, 1fr); gap: 12px; }
    .game-head h1 { font-size: 26px; }
  }

  .home-alt { margin-top: 36px; }
  .poster {
    position: relative;
    height: clamp(440px, 36vw, 520px);
    border-radius: 28px;
    overflow: hidden;
    isolation: isolate;
    color: #f4f7fb;
  }
  .poster .slides,
  .poster .slide { position: absolute; inset: 0; }
  .poster .slide {
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s ease;
  }
  .poster .slide.is-on {
    opacity: 1;
    visibility: visible;
    z-index: 1;
  }
  .poster img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
  }
  .poster-opt {
    margin: 0 0 8px;
    color: #ffe14a;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .poster .slide-card,
  .poster .slide-frame {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 28px 36px 64px;
    background: #10182a;
  }
  .poster .slide-card::after { content: none; }
  .poster .slide-card .poster-copy,
  .poster .slide-frame .poster-copy {
    height: auto;
    flex: 1;
    min-width: 0;
    padding: 0;
    justify-content: center;
  }
  .poster-shot {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: block;
    height: calc(100% - 8px);
    max-height: 320px;
    aspect-ratio: 4 / 3;
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
  }
  .poster .poster-shot img {
    position: relative;
    inset: auto;
    filter: none;
    transform: none;
  }
  .poster-shot::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 48%;
    background: linear-gradient(transparent, rgba(6, 10, 20, .88));
  }
  .poster-shot span {
    position: absolute;
    z-index: 1;
    left: 14px;
    right: 14px;
    bottom: 12px;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .55);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .poster .slide-wash img,
  .poster .slide-frame .wash {
    filter: blur(18px);
    transform: scale(1.14);
  }
  .poster .slide-wash::after {
    background: linear-gradient(90deg, #0c1222 0%, rgba(12, 18, 34, .94) 34%, rgba(12, 18, 34, .55) 62%, rgba(12, 18, 34, .2) 100%);
  }
  .poster .slide-frame::after {
    background: linear-gradient(90deg, rgba(8, 12, 22, .82) 0%, rgba(8, 12, 22, .45) 55%, rgba(8, 12, 22, .25) 100%);
  }
  .poster .slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(6, 10, 20, .88) 0%, rgba(6, 10, 20, .55) 46%, rgba(6, 10, 20, .12) 100%);
  }
  .poster-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    max-width: 640px;
    height: 100%;
    padding: 36px 44px 64px;
  }
  .poster-kicker {
    margin: 0 0 10px;
    color: #7af0ff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .poster h1,
  .poster-title {
    margin: 0;
    max-width: 14ch;
    font-size: clamp(36px, 4.4vw, 64px);
    font-weight: 800;
    line-height: .95;
    letter-spacing: -.04em;
  }
  .poster-lead {
    margin: 14px 0 0;
    max-width: 36ch;
    color: rgba(244, 247, 251, .82);
    font-size: 18px;
  }
  .poster-dots {
    position: absolute;
    z-index: 2;
    left: 44px;
    bottom: 22px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .poster-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(244, 247, 251, .42);
    cursor: pointer;
  }
  .poster-dots button[aria-selected="true"] {
    width: 22px;
    background: #fff;
  }
  .poster-dots button:focus-visible {
    outline: 3px solid #7af0ff;
    outline-offset: 3px;
  }
  .poster-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
  }
  .poster-play,
  .poster-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 999px;
    border: 0;
    font: inherit;
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -.02em;
    text-decoration: none;
    cursor: pointer;
  }
  .poster-play {
    background: linear-gradient(#fff3a8, #ffe14a 42%, #e6ac00);
    color: #1a1400;
  }
  .poster-ghost {
    background: transparent;
    color: #f4f7fb;
    box-shadow: inset 0 0 0 1.5px rgba(244, 247, 251, .55);
  }
  .poster-play:hover { filter: brightness(1.05); }
  .poster-ghost:hover { background: rgba(255, 255, 255, .08); }
  .poster-play:focus-visible,
  .poster-ghost:focus-visible {
    outline: 3px solid #7af0ff;
    outline-offset: 3px;
  }
  .cat-board { margin-top: 42px; }
  .cat-board h2 {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  .cat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }
  .cat-card {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: 18px;
    overflow: hidden;
    color: #f4f7fb;
    text-decoration: none;
    isolation: isolate;
  }
  .cat-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
  }
  .cat-card span {
    position: absolute;
    inset: auto 0 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 42px 16px 14px;
    background: linear-gradient(transparent, rgba(6, 10, 20, .88));
  }
  .cat-card strong {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
  }
  .cat-card em {
    font-style: normal;
    font-size: 13px;
    font-weight: 600;
    color: rgba(244, 247, 251, .78);
  }
  .cat-card:hover img { transform: scale(1.05); }
  .cat-card:focus-visible {
    outline: 3px solid #7af0ff;
    outline-offset: 3px;
  }
  @media (max-width: 980px) {
    .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }}
  @media (max-width: 740px) {
    .poster { height: auto; min-height: 680px; border-radius: 20px; }
    .poster .slide::after {
      background: linear-gradient(to top, rgba(6, 10, 20, .92) 0%, rgba(6, 10, 20, .35) 58%, rgba(6, 10, 20, .12) 100%);
    }
    .poster-copy { max-width: none; padding: 24px 20px 56px; }
    .poster-lead { font-size: 16px; }
    .poster-dots { left: 20px; bottom: 16px; }
    .poster .slide-card,
    .poster .slide-frame {
      flex-direction: column-reverse;
      align-items: stretch;
      gap: 14px;
      padding: 16px 16px 52px;
    }
    .poster-shot { width: 100%; max-height: 168px; aspect-ratio: auto; }
    .poster .slide-wash::after {
      background: linear-gradient(to top, #0c1222 0%, rgba(12, 18, 34, .9) 46%, rgba(12, 18, 34, .25) 100%);
    }
    .poster .slide-fan {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
      padding: 16px 16px 52px;
    }
    .poster .slide-fan .poster-copy { max-width: none; }
    .poster .slide-fan .fan-row { width: 100%; padding: 6px 2px; }
    .poster .fan-card .title { font-size: 12px; }
    .cat-board { margin-top: 28px; }
    .cat-card { border-radius: 16px; }
    .cat-card strong { font-size: 18px; }}
  @media (prefers-reduced-motion: reduce) {
    .cat-card img { transition: none; }
    .cat-card:hover img { transform: none; }
    .poster .slide { transition: none; }
    .poster .fan-card { animation: none; transition: none; }
    .poster .fan-card:hover,
    .poster .fan-card:focus-visible { transform: translateY(-4px) rotate(0deg); }}
  .poster .slide-fan {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(0, 1.15fr);
    align-items: center;
    column-gap: 28px;
    background: #14182c;
    padding: 28px 32px 64px;
  }
  .poster .slide-fan::after { content: none; }
  .poster .slide-fan .poster-copy {
    flex: 1 1 320px;
    height: auto;
    min-width: 0;
    max-width: 480px;
    padding: 0;
    justify-content: center;
  }
  .poster .slide-fan .fan-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 12px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 10px 4px;
  }
  .poster .fan-card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 14px;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 12px 22px rgba(0, 0, 0, .4);
    transform: rotate(var(--tilt));
    animation: fan-bob 3.8s ease-in-out infinite;
    animation-delay: var(--delay);
  }
  .poster .slide.is-on .fan-card:nth-child(1) { --tilt: -5deg; --bob: -8px; --delay: 0s; }
  .poster .slide.is-on .fan-card:nth-child(2) { --tilt: 3deg; --bob: 7px; --delay: .4s; }
  .poster .slide.is-on .fan-card:nth-child(3) { --tilt: -2.5deg; --bob: -6px; --delay: .8s; }
  .poster .slide.is-on .fan-card:nth-child(4) { --tilt: 3.5deg; --bob: 8px; --delay: .2s; }
  .poster .slide.is-on .fan-card:nth-child(5) { --tilt: -3deg; --bob: -7px; --delay: .7s; }
  .poster .slide.is-on .fan-card:nth-child(6) { --tilt: 4deg; --bob: 6px; --delay: 1.1s; }
  @keyframes fan-bob {
    0%, 100% { transform: translateY(0) rotate(var(--tilt)); }
    50% { transform: translateY(var(--bob)) rotate(var(--tilt)); }
  }
  .poster .fan-card img {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: none;
    transform: none;
  }
  .poster .fan-card .name {
    padding: 28px 8px 7px;
  }
  .poster .fan-card .title {
    font-size: 13px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .poster .fan-card .meta { margin-top: 4px; gap: 4px; font-size: 11px; }
  .poster .fan-card .cats { padding: 1px 6px; }
  .poster .fan-card:hover,
  .poster .fan-card:focus-visible {
    z-index: 2;
    animation: none;
    transform: translateY(-6px) rotate(0deg) scale(1.05);
    box-shadow: 0 0 0 2px #7af0ff, 0 14px 26px rgba(0, 0, 0, .45);
  }
  .poster .fan-card:hover .name,
  .poster .fan-card:focus-visible .name {
    opacity: 1;
    transform: none;
  }
  .poster .fan-card:hover .title,
  .poster .fan-card:focus-visible .title {
    text-shadow: 0 0 10px rgba(122, 240, 255, .9), 0 2px 8px rgba(0, 0, 0, .7);
  }
  .poster .fan-card:focus-visible {
    outline: 3px solid #7af0ff;
    outline-offset: 3px;
  }
  @media (max-width: 740px) {
    .poster .slide-fan {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
      padding: 16px 16px 52px;
    }
    .poster .slide-fan .poster-copy { max-width: none; }
    .poster .slide-fan .fan-row { width: 100%; padding: 6px 2px; }
    .poster .fan-card .title { font-size: 12px; }}
  .lane { margin-top: 36px; }
  .lane-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
  }
  .lane-mark {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
  }
  .lane-mark img {
    width: 64px;
    height: 48px;
    object-fit: cover;
    border-radius: 12px;
    flex: none;
  }
  .lane-mark h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: -.03em;
  }
  .lane-mark p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 14px;
  }
  .lane-mark:hover h2 { color: var(--blue); }
  .lane-more {
    flex: none;
    color: var(--blue);
    font-weight: 700;
    text-decoration: none;
  }
  .lane-more:hover { text-decoration: underline; text-underline-offset: 3px; }
  .lane-row {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 12px;
  }
  .lane-row .card { aspect-ratio: 4 / 3; }
  .lane-row .shot img { object-fit: cover; }
  @media (max-width: 1100px) {
    .lane-row {
      grid-template-columns: none;
      grid-auto-flow: column;
      grid-auto-columns: 148px;
      overflow-x: auto;
      scrollbar-width: none;
      margin-inline: -12px;
      padding-inline: 12px;
      scroll-snap-type: x mandatory;
    }
    .lane-row::-webkit-scrollbar { display: none; }
    .lane-row .card { scroll-snap-align: start; }}
  @media (max-width: 740px) {
    .lane { margin-top: 28px; }
    .lane-mark h2 { font-size: 18px; }
    .lane-mark img { width: 48px; height: 36px; }}
.menu-azar {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0 0 6px;
    padding: 12px 14px;
    border: 0;
    border-radius: 12px;
    background: #ffe14a;
    color: #1a1400;
    font: inherit;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .22);
  }
.menu-azar:hover { filter: brightness(1.05); }
.menu-azar:focus-visible { outline: 3px solid #7af0ff; outline-offset: 3px; }

  .poster-nav {
    position: absolute;
    z-index: 3;
    left: 28px;
    right: 28px;
    bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .poster-nav .poster-dots { position: static; flex-wrap: wrap; }
  .poster-pick {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #f4f7fb;
    font-size: 13px;
    font-weight: 700;
  }
  .poster-pick select {
    max-width: 210px;
    height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(244, 247, 251, .35);
    background: rgba(8, 12, 22, .78);
    color: #fff;
    font: inherit;
    font-weight: 700;
  }
  .poster-pick select:focus-visible { outline: 3px solid #7af0ff; outline-offset: 3px; }

  .poster .slide-machine {
    display: grid;
    grid-template-columns: minmax(240px, .9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 22px;
    background: #14182c;
    padding: 28px 32px 72px;
  }
  .poster .slide-machine::after { content: none; }
  .poster .slide-machine .poster-copy {
    height: auto;
    max-width: none;
    padding: 0;
    justify-content: center;
  }
  .machine-win {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
    padding: 8px;
    border-radius: 18px;
    background: #0c1220;
    box-shadow: inset 0 0 0 1px rgba(122, 240, 255, .28);
  }
  .reel-col {
    position: relative;
    height: 132px;
    overflow: hidden;
    border-radius: 12px;
    background: #070b14;
  }
  .reel-col::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(rgba(7, 11, 20, .55), transparent 22% 78%, rgba(7, 11, 20, .55));
  }
  .reel { margin: 0; padding: 0; list-style: none; will-change: transform; }
  .reel li { height: 132px; }
  .reel a {
    display: grid;
    grid-template-rows: 1fr auto;
    height: 100%;
    color: #fff;
    text-decoration: none;
    pointer-events: none;
  }
  .poster .reel img {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: none;
    transform: none;
  }
  .reel span {
    padding: 4px 8px 6px;
    background: #0c1220;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .reel.is-blur { filter: blur(1.5px); }
  .machine-out { margin-top: 14px; min-height: 52px; color: rgba(244, 247, 251, .86); font-size: 15px; }
  .machine-out p { margin: 0; }
  .machine-res { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
  .machine-res a {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    background: #ffe14a;
    color: #1a1400;
    font-weight: 800;
    text-decoration: none;
  }
  .machine-res a:hover { background: #fff; }
  .machine-res a:focus-visible { outline: 3px solid #7af0ff; outline-offset: 3px; }
  .slide-machine .poster-play { margin-top: 12px; }

  .duel {
    margin-top: 28px;
    padding: 22px 20px 26px;
    border-radius: 22px;
    background: var(--card);
    border: 1px solid var(--line);
    text-align: center;
  }
  .duel-head h2 { margin: 0; font-size: 26px; letter-spacing: -.03em; }
  .duel-head p { margin: 6px 0 0; color: var(--muted); }
  .duel-pool {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 88px;
    margin: 18px 0;
    padding: 0;
    list-style: none;
  }
  .duel.is-js .duel-pool > li:not(.is-on) { display: none; }
  .duel.is-js .duel-pool::after {
    content: "VS";
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #ffe14a;
    color: #1a1400;
    font-weight: 800;
  }
  .duel .card { width: min(280px, 38vw); aspect-ratio: 4 / 3; }
  .duel .shot img { object-fit: cover; }
  .duel .name { opacity: 1; transform: none; }
  .duel .duel-next {
    color: var(--ink);
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--line);
  }
  .duel .duel-next:hover { background: var(--chip); }

  @media (max-width: 740px) {
    .poster-nav { left: 12px; right: 12px; bottom: 10px; }
    .poster-pick span, .poster-pick { font-size: 12px; }
    .poster-pick select { max-width: 132px; padding: 0 8px; }
    .poster .slide-machine {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
      padding: 16px 16px 64px;
      overflow: auto;
    }
    .reel-col, .reel li { height: 104px; }
    .duel.is-js .duel-pool { flex-direction: column; gap: 12px; }
    .duel.is-js .duel-pool::after { position: static; translate: none; }
    .duel .card { width: min(280px, 100%); }}
  @media (prefers-reduced-motion: reduce) {
    .reel.is-blur { filter: none; }}

  .home-4 .sec-head { align-items: flex-start; }
  .home-4 .sec-copy { display: grid; gap: 3px; min-width: 0; }
  .home-4 .sec-title,
  .home-4 .sec-title a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink-title);
    text-decoration: none;
    --ink-hover: color-mix(in srgb, var(--ink-title) 58%, #fff);
    --ink-arrow: color-mix(in srgb, var(--ink-title) 28%, #fff);
  }
  .home-4 .sec-title a::after { content: none; }
  .home-4 .sec-title:hover,
  .home-4 .sec-title:hover a,
  .home-4 .sec-title a:hover {
    color: var(--ink-hover);
    text-decoration: none;
  }
  .home-4 .sec-ico {
    width: auto;
    height: auto;
    flex: none;
    font-size: 32px;
    line-height: 1;
  }
  .home-4 .sec-go {
    width: 24px;
    height: 24px;
    flex: none;
    padding: 3px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink-title) 18%, transparent);
    transition: transform .16s ease, color .16s ease, background .16s ease;
  }
  .home-4 .sec-title:hover .sec-go,
  .home-4 .sec-title a:hover .sec-go {
    transform: scale(1.22);
    color: var(--ink-arrow);
    background: color-mix(in srgb, var(--ink-title) 34%, transparent);
  }
  .home-4 .sec-sub { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; color: #c5ced8; }
  html[data-theme="light"] .home-4 .sec-title,
  html[data-theme="light"] .home-4 .sec-title a {
    --ink-hover: color-mix(in srgb, var(--ink-title) 70%, #000);
    --ink-arrow: color-mix(in srgb, var(--ink-title) 48%, #000);
  }
  html[data-theme="light"] .home-4 .sec-sub { color: #3a4556; }
  .home-4 .band-resume { --ink-title: #d7f3ff; --ink-sub: #d7f3ff; }
  .home-4 .band-pick { --ink-title: #d8ffe8; --ink-sub: #d8ffe8; }
  .home-4 .band-new { --ink-title: #c8fff6; --ink-sub: #c8fff6; }
  .home-4 .band-hallow { --ink-title: #f3e4ff; --ink-sub: #f3e4ff; }
  .home-4 .band-accion { --ink-title: #ffd0c4; --ink-sub: #ffd0c4; }
  .home-4 .band-aventuras { --ink-title: #d4efff; --ink-sub: #d4efff; }
  .home-4 .band-carreras { --ink-title: #ffe7a3; --ink-sub: #ffe7a3; }
  .home-4 .band-deportes { --ink-title: #d4ffe9; --ink-sub: #d4ffe9; }
  .home-4 .band-chicas { --ink-title: #ffd0e6; --ink-sub: #ffd0e6; }
  .home-4 .band-mesa { --ink-title: #e4e9ff; --ink-sub: #e4e9ff; }
  .home-4 .band-habilidad { --ink-title: #d6e4ff; --ink-sub: #d6e4ff; }
  .home-4 .band-infantiles { --ink-title: #e7f7c4; --ink-sub: #e7f7c4; }
  html[data-theme="light"] .home-4 .band-resume { --ink-title: #0a3d5c; --ink-sub: #0a3d5c; }
  html[data-theme="light"] .home-4 .band-pick { --ink-title: #0d4a28; --ink-sub: #0d4a28; }
  html[data-theme="light"] .home-4 .band-new { --ink-title: #0a4a42; --ink-sub: #0a4a42; }
  html[data-theme="light"] .home-4 .band-hallow { --ink-title: #4a2070; --ink-sub: #4a2070; }
  html[data-theme="light"] .home-4 .band-accion { --ink-title: #7a2610; --ink-sub: #7a2610; }
  html[data-theme="light"] .home-4 .band-aventuras { --ink-title: #0a4068; --ink-sub: #0a4068; }
  html[data-theme="light"] .home-4 .band-carreras { --ink-title: #5c4200; --ink-sub: #5c4200; }
  html[data-theme="light"] .home-4 .band-deportes { --ink-title: #0a4a30; --ink-sub: #0a4a30; }
  html[data-theme="light"] .home-4 .band-chicas { --ink-title: #7a1848; --ink-sub: #7a1848; }
  html[data-theme="light"] .home-4 .band-mesa { --ink-title: #24366e; --ink-sub: #24366e; }
  html[data-theme="light"] .home-4 .band-habilidad { --ink-title: #163672; --ink-sub: #163672; }
  html[data-theme="light"] .home-4 .band-infantiles { --ink-title: #314a08; --ink-sub: #314a08; }
.home-4 .sorpresa .poster-play { flex: none; min-height: 52px; padding: 0 22px; font-size: 17px; }
html[data-theme="light"] .home-4 .sorpresa {
    color: var(--ink);
    background:
      radial-gradient(90% 180% at 100% 50%, color-mix(in srgb, var(--play) 55%, transparent), transparent 64%),
      var(--card);
    border-color: color-mix(in srgb, var(--play) 70%, var(--line));
  }
html[data-theme="light"] .home-4 .sorpresa p:not(.azar-t) { color: var(--muted); }
  @media (max-width: 740px) {.home-4 .sorpresa .poster-play { width: 100%; }}

  .home-4 .va-stage { margin: 22px 0 8px; }
  .home-4 .va-slides { position: relative; height: clamp(460px, 42vw, 580px); border-radius: 26px; overflow: hidden; background: #141a2e; isolation: isolate; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 18px 40px rgba(0, 0, 0, .28); }
  .home-4 .va-slide { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 40px; padding: 40px clamp(28px, 4vw, 64px) 64px; color: #f4f7fb; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
  .home-4 .va-slide.is-on { opacity: 1; visibility: visible; transition: opacity .7s ease; }
  .home-4 .va-slide:not(.is-on) { content-visibility: hidden; }
  .home-4 .va-amb { position: absolute; inset: -60px; width: calc(100% + 120px); height: calc(100% + 120px); max-width: none; object-fit: cover; z-index: -2; filter: blur(42px) saturate(1.7) brightness(1.15); transform: scale(1.08); }
  .home-4 .va-slide::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 90% at 78% 42%, color-mix(in srgb, var(--tint) 48%, transparent), transparent 68%), linear-gradient(90deg, rgba(12, 14, 19, .58) 0 22%, rgba(12, 14, 19, .12) 56%, transparent); }
  .home-4 .va-copy { position: relative; z-index: 1; max-width: 560px; }
  .home-4 .va-kick { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
  .home-4 .va-kick::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--tint); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tint) 30%, transparent); }
  .home-4 .va-t { margin: 14px 0 12px; font-size: clamp(34px, 4.2vw, 60px); line-height: 1.02; font-weight: 800; letter-spacing: -.025em; text-wrap: balance; }
  .home-4 .va-d { margin: 0; font-size: 17px; line-height: 1.45; color: #d5d9e2; max-width: 46ch; }
  .home-4 .va-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
  .home-4 .va-slide.va-fan { grid-template-columns: minmax(220px, .78fr) minmax(0, 1.22fr); gap: 20px 28px; }
  .home-4 .va-fan .fan-row { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; min-width: 0; padding: 8px 2px; }
  .home-4 .fan-card { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; color: #fff; text-decoration: none; box-shadow: 0 12px 22px rgba(0, 0, 0, .4); transform: rotate(var(--tilt, 0deg)); animation: fan-bob 3.8s ease-in-out infinite; animation-delay: var(--delay, 0s); }
  .home-4 .va-slide.is-on .fan-card:nth-child(1) { --tilt: -5deg; --bob: -8px; --delay: 0s; }
  .home-4 .va-slide.is-on .fan-card:nth-child(2) { --tilt: 3deg; --bob: 7px; --delay: .4s; }
  .home-4 .va-slide.is-on .fan-card:nth-child(3) { --tilt: -2.5deg; --bob: -6px; --delay: .8s; }
  .home-4 .va-slide.is-on .fan-card:nth-child(4) { --tilt: 3.5deg; --bob: 8px; --delay: .2s; }
  .home-4 .va-slide.is-on .fan-card:nth-child(5) { --tilt: -3deg; --bob: -7px; --delay: .7s; }
  .home-4 .va-slide.is-on .fan-card:nth-child(6) { --tilt: 4deg; --bob: 6px; --delay: 1.1s; }
  .home-4 .fan-card img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
  .home-4 .fan-card .name { padding: 28px 8px 7px; }
  .home-4 .fan-card .title { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .home-4 .fan-card .meta { margin-top: 4px; gap: 4px; font-size: 11px; }
  .home-4 .fan-card .cats { padding: 1px 6px; }
  .home-4 .fan-card:hover,
  .home-4 .fan-card:focus-visible { z-index: 2; animation: none; transform: translateY(-6px) rotate(0deg) scale(1.04); box-shadow: 0 0 0 2px #7af0ff, 0 14px 26px rgba(0, 0, 0, .45); }
  .home-4 .fan-card:hover .name,
  .home-4 .fan-card:focus-visible .name { opacity: 1; transform: none; }
  .home-4 .fan-card:hover .title,
  .home-4 .fan-card:focus-visible .title { text-shadow: 0 0 10px rgba(122, 240, 255, .9), 0 2px 8px rgba(0, 0, 0, .7); }
  .home-4 .fan-card:focus-visible { outline: 3px solid #7af0ff; outline-offset: 3px; }
  .home-4 .va-art { position: relative; z-index: 1; justify-self: end; width: min(100%, 520px); aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .1); }
  .home-4 .va-art img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
  .home-4 .va-slide.is-on .va-art { animation: va-art-in 1s cubic-bezier(.2, .7, .2, 1) both; }
  .home-4 .va-slide.is-on .va-copy > * { animation: va-copy-in .7s cubic-bezier(.2, .7, .2, 1) both; }
  .home-4 .va-slide.is-on .va-copy > :nth-child(2) { animation-delay: .06s; }
  .home-4 .va-slide.is-on .va-copy > :nth-child(3) { animation-delay: .12s; }
  .home-4 .va-slide.is-on .va-copy > :nth-child(4) { animation-delay: .18s; }
  @keyframes va-art-in { from { opacity: 0; transform: translateX(28px) scale(.97); } }
  @keyframes va-copy-in { from { opacity: 0; transform: translateY(12px); } }
  .home-4 .va-picks { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 3; display: flex; justify-content: center; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .home-4 .va-pick { all: unset; position: relative; display: block; width: 10px; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .42); cursor: pointer; overflow: hidden; transition: width .2s ease, background .2s ease; }
  .home-4 .va-pick::after { content: ""; position: absolute; inset: -12px; }
  .home-4 .va-pick.is-on { width: 34px; background: rgba(255, 255, 255, .22); }
  .home-4 .va-pick:hover { background: rgba(255, 255, 255, .7); }
  .home-4 .va-pick:focus-visible { outline: 3px solid #7af0ff; outline-offset: 4px; }
  .home-4 .va-pick i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #e6ac00; }
  .home-4 .va-pick.is-on i { animation: va-fill 7s linear forwards; }
  .home-4 .va-stage.is-paused .va-pick.is-on i { animation-play-state: paused; }
  @keyframes va-fill { to { width: 100%; } }
  @media (max-width: 900px) {
    .home-4 .va-slide { grid-template-columns: 1fr; align-content: end; gap: 14px; padding: 16px 16px 52px; }
    .home-4 .va-slide.va-fan { align-content: start; }
    .home-4 .va-fan .fan-row { gap: 10px 8px; padding: 4px 0; }
    .home-4 .fan-card .title { font-size: 12px; }
    .home-4 .va-art { order: -1; justify-self: stretch; width: 100%; aspect-ratio: 16 / 10; }
    .home-4 .va-slide::before { background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 28%, transparent), rgba(12, 14, 19, .42) 55%, rgba(12, 14, 19, .72)); }
    .home-4 .va-t { margin: 8px 0 6px; font-size: 32px; }
    .home-4 .va-d { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .home-4 .va-acts { margin-top: 14px; }
    .home-4 .va-slides { height: auto; min-height: 460px; display: grid; }
    .home-4 .va-slide { grid-area: 1 / 1; position: relative; inset: auto; min-height: 460px; }}
  @media (prefers-reduced-motion: reduce) {
    .home-4 .va-slide,
    .home-4 .va-slide.is-on .va-art,
    .home-4 .va-slide.is-on .va-copy > *,
    .home-4 .fan-card { animation: none; transition: none; }
    .home-4 .fan-card:hover,
    .home-4 .fan-card:focus-visible { transform: translateY(-4px) rotate(0deg); }
    .home-4 .va-pick.is-on i { animation: none; width: 100%; }
    .home-4 .sec-title:hover .sec-go,
    .home-4 .sec-title a:hover .sec-go { transform: none; }}
  html[data-theme="light"] .home-4 .va-slides {
    background: #fff;
    box-shadow: 0 0 0 1px rgba(20, 50, 74, .16), 0 16px 36px rgba(20, 50, 74, .14);
  }
  html[data-theme="light"] .home-4 .va-amb { filter: blur(42px) saturate(1.45) brightness(1.12); }
  html[data-theme="light"] .home-4 .va-slide { color: var(--ink); }
  html[data-theme="light"] .home-4 .va-slide::before {
    background:
      radial-gradient(70% 90% at 78% 42%, color-mix(in srgb, var(--tint) 42%, transparent), transparent 68%),
      linear-gradient(90deg, rgba(255, 255, 255, .9) 0 24%, rgba(255, 255, 255, .42) 56%, rgba(255, 255, 255, .12));
  }
  html[data-theme="light"] .home-4 .va-kick,
  html[data-theme="light"] .home-4 .va-t { color: var(--ink); }
  html[data-theme="light"] .home-4 .va-d { color: var(--muted); }
  html[data-theme="light"] .home-4 .va-slide .poster-ghost {
    color: var(--ink);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 32%, transparent);
  }
  html[data-theme="light"] .home-4 .va-slide .poster-ghost:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
  html[data-theme="light"] .home-4 .va-pick { background: color-mix(in srgb, var(--ink) 28%, transparent); }
  html[data-theme="light"] .home-4 .va-pick.is-on { background: color-mix(in srgb, var(--ink) 12%, transparent); }
  html[data-theme="light"] .home-4 .va-pick:hover { background: color-mix(in srgb, var(--ink) 42%, transparent); }
  @media (max-width: 900px) {
    html[data-theme="light"] .home-4 .va-slide::before {
      background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 28%, transparent), rgba(255, 255, 255, .55) 48%, rgba(255, 255, 255, .9));
    }}
  .home-4 .rail { --cell: calc(176px * var(--foto, 1.1)); }
  .home-4 .rail.mini { --cell: calc(118px * var(--foto, 1.1)); }
  @media (max-width: 740px) {
    .home-4 .rail { --cell: calc(148px * var(--foto, 1.1)); }
    .home-4 .rail.mini { --cell: calc(104px * var(--foto, 1.1)); }}
  .home-4 .menu-list a { gap: 12px; }
  .home-4 .menu-list a > span[aria-hidden] { display: grid; place-items: center; width: 28px; font-size: 24px; line-height: 1; }
.home-4 .site-foot .logo {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 14px;
    background: var(--bar);
  }
.home-4 .site-foot .logo img { height: 34px; }
.home-4 .site-foot a { color: var(--muted); text-decoration: none; }
.home-4 .site-foot a:hover { color: var(--ink); }
.home-4 .site-foot a:focus-visible { outline: 3px solid #7af0ff; outline-offset: 3px; }
.home-4 .foot-social a {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: var(--chip);
    color: var(--ink);
    border: 1px solid var(--line);
  }
.home-4 .foot-social a:hover { background: var(--play); color: var(--play-ink); border-color: transparent; }
html[data-theme="light"] .home-4 .site-foot {
    background: var(--bar);
    color: var(--on-bar);
    border-top: 1px solid var(--bar-line);
  }
html[data-theme="light"] .home-4 .site-foot .logo { background: transparent; padding: 0; }
html[data-theme="light"] .home-4 .foot-brand p, html[data-theme="light"] .home-4 .site-foot a, html[data-theme="light"] .home-4 .foot-base { color: rgba(255, 255, 255, .82); }
html[data-theme="light"] .home-4 .foot-kicker, html[data-theme="light"] .home-4 .site-foot a:hover { color: #fff; }
html[data-theme="light"] .home-4 .foot-social a {
    background: var(--btn);
    color: #fff;
    border-color: var(--btn-line);
  }
html[data-theme="light"] .home-4 .foot-social a:hover { background: var(--play); color: var(--play-ink); border-color: transparent; }
html[data-theme="light"] .home-4 .foot-base { border-top-color: var(--bar-line); }

/* ---- Ajustes para la web (CodeIgniter) ---- */
/* Aviso de teclado en las carátulas: siempre visible (el diseño lo mostraba solo en móvil) */
.key {
  display: grid;
  place-items: center;
  width: 28px;
  height: 22px;
  padding: 0;
  font-size: 0;
}
.key::before {
  content: "";
  width: 16px;
  height: 12px;
  background: center / contain no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'><rect x='1' y='1' width='14' height='10' rx='1.6' fill='none' stroke='%237af0ff' stroke-width='1.4'/><path d='M3.2 4.2h1.2M6.2 4.2h1.2M9.2 4.2h1.2M12 4.2h1.2M3.2 7.4h1.2M5.6 7.4h4.8M11.6 7.4h1.2' stroke='%237af0ff' stroke-width='1.2' stroke-linecap='round'/></svg>");
}
/* Carátulas de juegos que no funcionan en móvil (Unity, Shockwave) */
.grey_img { filter: grayscale(100%); opacity: .75; }
/* Favoritos (ajax_favoritos) y sugerencias (/suggest) llegan con el marcado antiguo: filas de imagen + nombre */
.fav-lista .grid-games, .suggest .grid-games { display: grid; gap: 4px; }
.fav-lista .box, .suggest .box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.fav-lista .box:hover, .suggest .box:hover { background: var(--chip); color: var(--blue); }
.fav-lista .box img, .suggest .box img { width: 48px !important; height: 36px; object-fit: cover; border-radius: 6px; flex: none; }
.fav-lista .text-center { color: var(--muted); font-size: 13px; }
.fav-lista h4 { margin: 4px 0; color: var(--ink); }
.suggest br { display: none; }
.suggest b { background: none !important; color: var(--blue); }
/* Enlaces de la cuenta */
a.cuenta-link { display: block; text-decoration: none; }
/* Huecos de publicidad: el anuncio va centrado dentro */
.ad > div { margin: 0 auto; }
/* Ficha en móvil: aviso sobre el botón Jugar y marco del juego a pantalla completa */
.play-btn { gap: 10px; align-content: center; }
.play-aviso {
  display: inline-block; max-width: 90%; padding: 6px 12px; border-radius: 999px;
  background: rgba(8, 12, 24, .82); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.3; text-align: center;
}
.play-no { margin: 0; cursor: default; }
.play-no .play-aviso { border-radius: 14px; padding: 10px 14px; }
#load_frame { display: none; position: fixed; inset: 0; z-index: 1000; width: 100%; height: 100%; background: #000; }
/* Logo en móvil: el diseño lo aplastaba (ancho de 33px con 34px de alto); ahora se reduce entero, sin deformarse */
@media (max-width: 740px) {
  .topbar .logo { min-width: 0; display: flex; align-items: center; justify-content: center; }
  .topbar .logo img { width: 100%; max-width: 200px; height: auto; max-height: 34px; object-fit: contain; }
}
/* Botón de buscar: con icono (en pantallas pequeñas solo el icono) */
.buscar svg { display: none; }
.menu-tema { display: none; }
@media (max-width: 480px) {
  .bar-end { gap: 6px; }
  .buscar { display: grid !important; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; }
  .buscar svg { display: block; }
  .buscar span { display: none; }
  .bar-end > .theme { display: none; } /* el cambio de tema pasa al menú */
  .menu-tema { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 56px 16px 0; font-weight: 700; color: var(--ink); }
  .menu-tema + .menu-list { margin-top: 12px; }
  .topbar .logo img { max-width: 170px; max-height: 30px; }
}
/* Portada: en el móvil el carrusel de destacados va en una columna (texto arriba, 6 juegos debajo). En el diseño
   .va-slide.va-fan conservaba las dos columnas del escritorio y las fichas quedaban de 19 px */
@media (max-width: 900px) {
  .home-4 .va-slide.va-fan { grid-template-columns: 1fr; }
}
.portada-head .lede { max-width: 90ch; }
/* Tarjetas de juego en pantallas táctiles (móvil y tablet): el nombre se ve siempre, así que la franja oscura de
   debajo era demasiado alta y opaca (tapaba media carátula). Más baja y más transparente; el texto lleva sombra */
@media (hover: none), (pointer: coarse) {
  .card .name {
    padding: 22px 8px 6px;
    background: linear-gradient(to top, rgba(6, 10, 20, .78) 0%, rgba(6, 10, 20, .42) 58%, transparent 100%);
  }
  .card .title {
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 8px rgba(0, 0, 0, .6);
  }
  .card .meta { margin-top: 3px; gap: 4px; font-size: 11px; }
  .card .cats { padding: 1px 6px; }
  .card.big .name { padding: 40px 12px 10px; }
}
@media (hover: none), (pointer: coarse) {
  .home-4 .fan-card .name {
    padding: 14px 6px 4px;
    background: linear-gradient(to top, rgba(6, 10, 20, .75) 0%, rgba(6, 10, 20, .35) 60%, transparent 100%);
  }
  .home-4 .fan-card .title { font-size: 11px; text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }
  .home-4 .fan-card .meta { display: none; } /* en fichas tan pequeñas solo el nombre */
}