@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(fonts/bricolage-grotesque.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/plex-mono-400.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/plex-mono-500.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/plex-mono-600.woff2) format('woff2');
}

:root {
  --fondo: #F3F3EF;
  --tinta: #121212;
  --acento: #1F3BFF;
  --acento-hover: #0B1E9E;
  --amarillo: #FFE24A;
  --oscuro: #1D1D1B;
  --borde-oscuro: #34342F;
  --sec-claro: #55554F;
  --sec-oscuro: #B9B9B0;
  --parrafo-oscuro: #D6D6CF;
  --titulos: 'Bricolage Grotesque', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --ventana: Verdana, Tahoma, sans-serif;
  /* Cursor de pokébola en pixel art; el PNG es para navegadores que no aceptan SVG. */
  --cursor: url(img/pokebola.svg) 16 16, url(img/pokebola.png) 16 16, auto;
  --cursor-picar: url(img/pokebola-brilla.svg) 16 16, url(img/pokebola-brilla.png) 16 16, pointer;
}

* { box-sizing: border-box; }
html { cursor: var(--cursor); }
a, button { cursor: var(--cursor-picar); }
body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--titulos); }
a { color: var(--acento); }
a:hover { color: var(--acento-hover); }
.acento { color: var(--acento); }
.sec { color: var(--sec-claro); }

.cabecera {
  max-width: 1280px; margin: 0 auto; padding: 24px 32px;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 14px;
}
.marca { font-weight: 600; }

/* Grises de la ventana de 2008 */
:root {
  --marco: #77776F;
  --gris-ventana: #DCDCD5;
  --boton: #EDEDE8;
  --boton-sombra: #8E8E86;
  --linea: #A6A69E;
  --linea-clara: #C9C9C2;
  --linea-tenue: #E2E2DC;
  --carpetas: #E8E8E2;
  --barra-vista: #F0F0EB;
  --texto-viejo: #4A4A45;
  --texto-suave: #3A3A35;
  --texto-entrada: #2A2A27;
}

.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.amarillo { color: var(--amarillo); }

@keyframes parpadeo { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
.parpadeo { animation: parpadeo 1.2s steps(2, start) infinite; }
@keyframes voltear { from { transform: perspective(600px) rotateY(90deg); } to { transform: perspective(600px) rotateY(0); } }
.carta-rara { animation: voltear .5s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .parpadeo, .carta-rara { animation: none; }
}

/* Portada */
.heroe {
  max-width: 1280px; margin: 0 auto; padding: 40px 32px 104px;
  display: flex; flex-wrap: wrap; gap: 56px; align-items: center;
}
.heroe-texto { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.antetitulo {
  margin: 0; font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--sec-claro);
}
h1 {
  margin: 0; font-size: clamp(52px, 6.4vw, 96px); line-height: 0.95; font-weight: 800; letter-spacing: -0.035em;
}
.subrayado {
  color: var(--acento); text-decoration: underline;
  text-decoration-thickness: 0.07em; text-underline-offset: 0.12em;
}
.entrada { margin: 0; font-size: 20px; line-height: 1.5; max-width: 36ch; color: var(--texto-entrada); }
/* Campo «De:» de un correo nuevo, con su cursor. Es texto: la dirección todavía no recibe correo. */
.campo-de {
  margin: 0; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px;
  background: #FFFFFF; border: 2px solid var(--tinta); box-shadow: 5px 5px 0 var(--tinta);
  font-family: var(--mono); font-size: clamp(16px, 1.7vw, 22px);
}
.campo-de b { font-weight: 600; }
.cursor { width: 2px; height: 1.1em; background: var(--tinta); }
.sin-leer {
  margin: 0; display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 15px; font-weight: 500;
}
.punto-amarillo { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #E0B800; }
.enlace-mono { font-family: var(--mono); font-size: 14px; align-self: flex-start; padding: 12px 0; }

/* Ventana */
.ventana {
  flex: 1 1 620px; min-width: 0; border: 1px solid var(--marco); background: var(--gris-ventana);
  box-shadow: 0 40px 80px -24px rgba(18, 18, 18, 0.35);
  font-family: var(--ventana); font-size: 13px; color: var(--tinta);
}
.barra-titulo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 4px 4px 4px 12px; background: var(--acento); color: #FFFFFF; font-weight: 700; font-size: 13px;
}
button { font: inherit; color: inherit; }
.boton-barra {
  appearance: none; margin: 0; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px;
  background: var(--gris-ventana); border: 1px solid #FFFFFF; border-right-color: var(--marco); border-bottom-color: var(--marco);
  font-family: var(--ventana); font-size: 12px; font-weight: 700; color: var(--tinta);
}
.herramientas {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border-bottom: 1px solid var(--linea); font-size: 12px;
}
.herramientas span, .boton-win {
  padding: 4px 12px; background: var(--boton);
  border: 1px solid var(--boton-sombra); border-top-color: #FFFFFF; border-left-color: #FFFFFF;
}
.boton-win {
  appearance: none; margin: 0; min-height: 44px; padding: 0 16px;
  font-family: var(--ventana); font-size: 12px; color: var(--tinta);
}
.cuerpo { display: flex; flex-wrap: wrap; }
.carpetas {
  flex: 1 1 140px; max-width: 170px; padding: 14px 12px; background: var(--carpetas);
  border-right: 1px solid var(--linea); display: flex; flex-direction: column; gap: 10px; font-size: 12px;
}
.carpetas .actual { font-weight: 700; }
.panel { flex: 999 1 400px; min-width: 0; background: #FFFFFF; }
.estado { padding: 4px 10px; font-size: 11px; color: var(--texto-suave); border-top: 1px solid var(--linea); }

.boton-win:focus-visible, .boton-barra:focus-visible, .fila:focus-visible {
  outline: 3px solid var(--tinta); outline-offset: -3px;
}
.vista h2:focus { outline: none; }
.carta-rara:focus-visible { outline: 3px solid var(--acento); outline-offset: 4px; }

/* Bandeja */
.renglon {
  display: grid; grid-template-columns: 20px minmax(90px, 160px) minmax(0, 1fr) 64px; gap: 8px; align-items: center;
}
.renglon .asunto, .vieja .de { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.encabezado {
  padding: 6px 12px; font-size: 11px; font-weight: 700; background: var(--barra-vista); border-bottom: 1px solid var(--linea-clara);
}
.fila {
  appearance: none; margin: 0; width: 100%; min-height: 48px; padding: 12px; background: #FFFFFF;
  border: 0; border-bottom: 1px solid var(--linea-clara); text-align: left;
  font-family: var(--ventana); font-size: 13px; font-weight: 700; color: var(--tinta);
}
.fila:hover { background: #F7F7F3; }
.fila.amarilla { background: var(--amarillo); }
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--tinta); }
.vieja { padding: 11px 12px; border-bottom: 1px solid var(--linea-tenue); color: var(--texto-viejo); font-size: 13px; }
.casilla { width: 11px; height: 11px; border: 1px solid var(--boton-sombra); }
/* El spam de @BlackJoe500 grita con señales de alerta en pixel art. */
.alerta { display: inline-block; width: 1.15em; height: 1.1em; margin-right: .2em; vertical-align: -.2em; background: url(img/alerta.svg) center / contain no-repeat; }
.rojo { color: #C4261A; font-weight: 700; }
.pista { margin: 0; padding: 14px 12px; font-size: 12px; color: var(--texto-viejo); }

/* Vistas de correo */
.vista-barra {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between;
  padding: 6px 12px; background: var(--barra-vista); border-bottom: 1px solid var(--linea-clara);
  font-size: 12px; color: var(--texto-viejo);
}
.cabeceras {
  margin: 0; padding: 16px 20px; display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 6px 12px;
  font-size: 12px; border-bottom: 1px solid var(--linea-tenue);
}
.cabeceras dt { font-weight: 700; color: var(--texto-viejo); }
.cabeceras dd { margin: 0; }
.cabeceras h2 { margin: 0; font: inherit; font-weight: 700; }
.mensaje {
  padding: 28px 28px 8px; max-width: 62ch; display: flex; flex-direction: column; gap: 16px;
  font-family: var(--mono); font-size: 15px; line-height: 1.75; color: var(--tinta);
}
.mensaje p { margin: 0; }
.resaltado { display: block; background: var(--amarillo); width: fit-content; padding: 0 4px; }
.bloque { display: block; }
.firma, .datos-anecdota { color: var(--texto-viejo); }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; padding: 24px 28px 28px; }
.boton-primario, .boton-borde {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  font-family: var(--titulos); font-weight: 700; font-size: 16px; text-decoration: none;
}
.boton-primario { appearance: none; margin: 0; border: 0; background: var(--acento); color: #FFFFFF; }
a.boton-primario:hover, .boton-primario:hover { color: #FFFFFF; background: var(--acento-hover); }
.boton-borde { border: 2px solid var(--tinta); color: var(--tinta); }
.boton-borde:hover { color: var(--tinta); background: #FFFFFF; }
.boton-primario:focus-visible, .boton-borde:focus-visible, .enlace-mono:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }

/* Sobre y carta */
.sobre { padding: 28px 20px 32px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.sobre-cerrado, .sobre-abierto { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.paquete {
  width: 200px; height: 296px; display: flex; flex-direction: column; background: var(--tinta); color: var(--fondo);
  box-shadow: 0 20px 40px -16px rgba(18, 18, 18, 0.5);
}
.paquete-borde { height: 14px; background: repeating-linear-gradient(90deg, var(--gris-ventana) 0 6px, var(--marco) 6px 12px); }
.paquete-frente {
  flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; padding: 16px;
  background: repeating-linear-gradient(135deg, var(--texto-entrada) 0 10px, var(--tinta) 10px 20px);
}
.paquete-etiqueta { padding: 4px 8px; background: var(--amarillo); color: var(--tinta); font-family: var(--mono); font-size: 11px; font-weight: 600; }
.paquete-titulo { font-family: var(--titulos); font-size: 36px; line-height: 0.95; font-weight: 800; letter-spacing: -0.03em; text-align: center; }
.paquete-edicion { font-family: var(--mono); font-size: 11px; color: var(--parrafo-oscuro); }
/* Full art: el dibujo llena la carta y el texto va encima, en paneles claros. */
.carta-rara {
  position: relative; width: 252px; aspect-ratio: 63 / 88; padding: 10px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  background: #3E98DE; border: 7px solid var(--amarillo); border-radius: 12px;
  box-shadow: 0 0 0 1px #B89A00, 0 20px 40px -16px rgba(18, 18, 18, 0.5);
}
.carta-arte { position: absolute; inset: 0; z-index: 0; background: #3E98DE url(img/slowbo-full.svg) center / cover no-repeat; }
.carta-nombre, .carta-texto { position: relative; z-index: 1; border-radius: 8px; background: rgba(255, 255, 255, 0.84); }
.carta-nombre { display: flex; align-items: center; gap: 6px; padding: 4px 8px; font-family: var(--titulos); font-weight: 800; }
.carta-titulo { flex: 1 1 auto; font-size: 19px; line-height: 1; }
.carta-pv { display: flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 13px; font-weight: 600; color: #A61B12; }
/* Tipo psíquico: un ojo morado. */
.carta-pv::after {
  content: ''; width: 16px; height: 16px; border: 1px solid var(--tinta); border-radius: 50%;
  background: radial-gradient(circle, var(--tinta) 0 2px, #FFFFFF 2.5px 4px, #8E5BC2 4.5px);
}
.carta-texto { display: flex; flex-direction: column; gap: 5px; padding: 7px 9px; }
.carta-ataque { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 3px 8px; font-family: var(--ventana); }
.ataque-costo { display: inline-flex; gap: 3px; vertical-align: middle; }
.ataque-costo i { width: 13px; height: 13px; border: 1px solid var(--tinta); border-radius: 50%; background: radial-gradient(circle, #FFFFFF 0 2px, #8E5BC2 2.5px); }
.ataque-nombre { font-size: 14px; font-weight: 700; }
.ataque-texto { grid-column: 1 / -1; font-size: 11px; line-height: 1.35; color: var(--texto-suave); }
.carta-reglas {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 3px 8px; padding-top: 5px;
  border-top: 1px solid rgba(18, 18, 18, 0.18); font-family: var(--mono); font-size: 9px; color: var(--texto-suave);
}
.carta-reglas > span { white-space: nowrap; }
.carta-reglas .ataque-costo i { width: 10px; height: 10px; background: #FFFFFF; }
.carta-pie { font-family: var(--mono); font-size: 9px; color: var(--texto-viejo); }
.sobre-nota { margin: 0; font-family: var(--mono); font-size: 13px; text-align: center; }

/* Drop */
.drop { padding: 24px 20px 28px; display: flex; flex-wrap: wrap; gap: 24px; }
.drop-foto {
  flex: 1 1 200px; min-width: 0; height: 260px; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: var(--tinta); color: var(--fondo);
  font-family: var(--titulos); font-size: 34px; line-height: 0.95; font-weight: 800; letter-spacing: -0.03em; text-align: center;
}
.drop-ficha { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 12px; font-family: var(--mono); }
.drop-edicion { font-size: 11px; letter-spacing: 0.08em; color: var(--texto-viejo); }
.drop-nombre { font-family: var(--titulos); font-size: 26px; line-height: 1; font-weight: 800; }
.drop-texto { font-size: 13px; line-height: 1.5; color: var(--texto-suave); }
.drop-precio { font-size: 15px; }
.drop-precio s { color: var(--texto-viejo); }
.drop-talla { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; }
.talla { padding: 6px 10px; border: 2px solid var(--tinta); font-weight: 600; }
.etiqueta-amarilla { align-self: flex-start; padding: 6px 10px; background: var(--amarillo); font-size: 12px; font-weight: 600; }
.drop-ficha .boton-win { align-self: flex-start; margin-top: 4px; }

/* Cambio de vista: con JS se ve solo la vista activa; sin JS, todas apiladas. */
.js .vista { display: none; }
.js .ventana[data-vista="bandeja"] #vista-bandeja,
.js .ventana[data-vista="carta"] #vista-carta,
.js .ventana[data-vista="sobre"] #vista-sobre,
.js .ventana[data-vista="drop"] #vista-drop { display: block; }
.js #vista-sobre:not([data-abierto]) .sobre-abierto,
.js #vista-sobre[data-abierto] .sobre-cerrado { display: none; }
html:not(.js) .vista + .vista { border-top: 3px solid var(--marco); }
html:not(.js) .cerrar,
html:not(.js) [data-volver],
html:not(.js) .vista [data-abre]:not(.fila),
html:not(.js) .sobre-cerrado { display: none; }

@media (min-width: 768px) {
  .cuerpo { min-height: 560px; }
}

@media (max-width: 767px) {
  .cabecera { padding: 18px 16px; font-size: 13px; }
  .heroe { padding: 8px 16px 64px; gap: 32px; }
  .heroe-texto { gap: 18px; }
  .entrada { font-size: 18px; }
  .herramientas { display: none; }
  .carpetas {
    flex: 1 1 100%; max-width: none; flex-direction: row; gap: 14px; padding: 8px 12px; overflow: hidden;
    white-space: nowrap; border-right: 0; border-bottom: 1px solid var(--linea); font-size: 11px;
  }
  .encabezado { display: none; }
  .renglon {
    grid-template-columns: 16px minmax(0, 1fr) auto; grid-template-areas: "marca de fecha" ". asunto asunto"; gap: 2px 8px;
  }
  .renglon > :first-child { grid-area: marca; }
  .renglon .de { grid-area: de; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .renglon .asunto { grid-area: asunto; font-weight: 400; }
  .renglon .fecha { grid-area: fecha; font-size: 11px; font-weight: 400; }
  .cabeceras { padding: 14px; grid-template-columns: 62px minmax(0, 1fr); gap: 5px 10px; font-size: 11px; }
  .mensaje { padding: 22px 18px 4px; gap: 14px; font-size: 14px; line-height: 1.7; }
  .acciones { flex-direction: column; gap: 10px; padding: 22px 18px; }
  .acciones .boton-primario, .acciones .boton-borde { min-height: 52px; }
  .acciones .boton-win { align-self: flex-start; }
}

/* Secciones de abajo */
:root {
  --borde-enlace: #5A5A53;
  --mosaico: #2A2A27;
}
.contenedor { max-width: 1280px; margin: 0 auto; }
.seccion-cabeza { display: flex; flex-direction: column; gap: 12px; }
.titulo-seccion { margin: 0; font-size: clamp(40px, 5vw, 72px); line-height: 1; font-weight: 800; letter-spacing: -0.03em; }

/* Logros: vitrina de trofeos estilo consola. Sin JavaScript se ven todos los detalles, sin las fichas. */
.logros { overflow-x: clip; background: #FFFFFF; border-top: 1px solid var(--linea-clara); border-bottom: 1px solid var(--linea-clara); }
.logros-contenido { padding: 96px 32px; display: flex; flex-direction: column; gap: 40px; }
.consola { background: #0E1236; color: #F3F3EF; border: 4px solid var(--tinta); box-shadow: 10px 10px 0 var(--acento); font-family: var(--mono); }
.trofeo { display: block; flex: none; width: 56px; height: 56px; background: center / contain no-repeat; image-rendering: pixelated; }
.trofeo-platino { background-image: url(img/trofeo-platino.svg); }
.trofeo-oro { background-image: url(img/trofeo-oro.svg); }
.candado { background-image: url(img/candado.svg); }

.perfil {
  display: grid; grid-template-columns: auto 1fr minmax(200px, 320px) auto; gap: 14px 28px; align-items: center; padding: 20px 28px;
  background: linear-gradient(180deg, #1F3BFF 0%, #14238F 100%); border-bottom: 4px solid var(--tinta);
}
.avatar {
  width: 76px; height: 76px; background: #DCDCD5 url(img/ricardo.svg) center / contain no-repeat; image-rendering: pixelated;
  border: 4px solid #FFFFFF; box-shadow: 4px 4px 0 var(--tinta);
}
.jugador-nombre { margin: 0; font-family: var(--titulos); font-weight: 800; font-size: clamp(22px, 2.4vw, 34px); letter-spacing: -0.02em; line-height: 1.05; }
.jugador-nivel { margin: 6px 0 0; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: #C9D0FF; }
.progreso-cifra { margin: 0 0 8px; display: flex; justify-content: space-between; gap: 12px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.barra { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; padding: 3px; background: var(--tinta); }
.barra i { height: 14px; background: #2B3170; }
.barra .lleno { background: var(--amarillo); box-shadow: inset 0 -4px 0 #D9B400; }
.conteo { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; font-size: 20px; font-weight: 600; }
.conteo li { display: flex; align-items: center; gap: 4px; }
.conteo .trofeo { width: 28px; height: 28px; }

.vitrina { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; padding: 20px; }
.fichas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ficha-logro {
  appearance: none; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 44px; padding: 14px 8px 12px;
  background: #161B4A; border: 3px solid #2B3170; border-radius: 0; color: #FFFFFF; font: 600 12px/1.25 var(--mono); text-align: center;
}
.ficha-platino { background: #0F2236; border-color: #A9D8F5; box-shadow: 0 0 18px rgba(169, 216, 245, 0.45); color: #E6F6FF; }
/* El oro sin brillo, para que el platino siga siendo el que resalta. */
.ficha-oro { background: #2A2208; border-color: #F2C230; color: #FFE24A; }
.ficha-bloqueado, .ficha-secreto { background: #0A0D2A; border-style: dashed; border-color: #3A3F75; color: #8F98D9; }
.ficha-bloqueado { border-color: var(--amarillo); }
.ficha-logro[aria-pressed="true"] { outline: 4px solid #FFFFFF; outline-offset: -1px; box-shadow: 6px 6px 0 #000000; transform: translate(-2px, -2px); }
.ficha-oro[aria-pressed="true"] { outline-color: #FFE24A; }
.ficha-platino[aria-pressed="true"] { outline-color: #E6F6FF; box-shadow: 6px 6px 0 #000000, 0 0 24px rgba(169, 216, 245, 0.6); }
.ficha-logro:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; }

.detalles { display: grid; }
.detalle[hidden] { display: none; }
.detalle { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-content: start; padding: 22px; background: #161B4A; border: 3px solid #2B3170; }
.detalle-platino { background: linear-gradient(135deg, #17324A 0%, #0D1B2A 100%); border: 4px solid #A9D8F5; box-shadow: 0 0 24px rgba(169, 216, 245, 0.4); }
.detalle-oro { background: linear-gradient(135deg, #3A2E06 0%, #1E1A0A 100%); border: 4px solid #F2C230; }
.detalle .trofeo { width: 96px; height: 96px; }
.detalle-texto > * { margin: 0; }
.detalle-tipo, .detalle-fecha { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: #8F98D9; }
.detalle h3 { margin-top: 6px; font-family: var(--titulos); font-weight: 800; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.05; letter-spacing: -0.01em; color: #FFFFFF; }
.detalle-descripcion { margin-top: 10px; font-family: var(--titulos); font-size: 17px; line-height: 1.4; color: #C9D0FF; }
.detalle-fecha { margin-top: 12px; }
.detalle-platino :is(.detalle-tipo, .detalle-fecha) { color: #A9D8F5; }
.detalle-platino h3 { color: #F2FAFF; }
.detalle-platino .detalle-descripcion { color: #CFE6F5; }
.detalle-oro :is(.detalle-tipo, .detalle-fecha) { color: #F2C230; }
.detalle-oro h3 { color: #FFE24A; }
.detalle-oro .detalle-descripcion { color: #F1E3B0; }
.logro-boton {
  display: inline-block; margin-top: 12px; padding: 6px 10px; background: var(--amarillo); color: var(--tinta); box-shadow: 3px 3px 0 #000000;
  font: 600 12px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
}
.logro-boton:hover { color: var(--tinta); background: #FFFFFF; }
.logro-boton:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.pista-logros { margin: 0; padding: 0 20px 16px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: #8F98D9; }
html:not(.js) :is(.fichas, .pista-logros) { display: none; }
html:not(.js) .vitrina { grid-template-columns: 1fr; }
html:not(.js) .detalles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 12px; }

/* Aviso de logro desbloqueado, arriba al centro como en la consola. */
.aviso-logro {
  position: fixed; z-index: 22; top: 16px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; pointer-events: none;
  background: #0E1236; color: #FFFFFF; border: 3px solid var(--amarillo); box-shadow: 5px 5px 0 var(--tinta); font-family: var(--mono);
}
.aviso-logro .trofeo { width: 40px; height: 40px; }
.aviso-logro p { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.aviso-titulo { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amarillo); }
.aviso-nombre { font-family: var(--titulos); font-size: 18px; font-weight: 800; }

@media (max-width: 1023px) {
  .vitrina { grid-template-columns: 1fr; }
}

/* Catálogo */
.casa { overflow-x: clip; background: var(--tinta); color: var(--fondo); }
.casa a { color: var(--fondo); }
.casa a:hover { color: var(--amarillo); }
.casa-contenido { padding: 112px 32px; display: flex; flex-direction: column; gap: 24px; }
.casa-cabeza { gap: 16px; max-width: 780px; padding-bottom: 24px; }
.casa .antetitulo, .etiqueta-tarjeta, .vistas, .nota-tarjeta, .marcador dt, .producto-precio { color: var(--sec-oscuro); }
.casa-entrada { margin: 0; font-size: 19px; line-height: 1.55; color: var(--parrafo-oscuro); }
.hilera { display: flex; flex-wrap: wrap; gap: 24px; }
.tarjeta {
  min-width: 0; padding: 32px; display: flex; flex-direction: column; gap: 14px;
  background: var(--oscuro); border: 1px solid var(--borde-oscuro);
}
.tarjeta-cotorrisa { flex: 2 1 620px; flex-direction: row; flex-wrap: wrap; gap: 32px; }
.tarjeta-anecdotario { flex: 1 1 340px; }
.tarjeta-ripe { flex: 3 1 520px; gap: 16px; }
.tarjeta-media { flex: 2 1 320px; }
.tarjeta-chica { flex: 1 1 300px; gap: 12px; }
.tarjeta-cartel { flex: 1 1 270px; padding: 0; gap: 0; }
.etiqueta-tarjeta { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.titulo-tarjeta { margin: 0; line-height: 1; font-weight: 800; letter-spacing: -0.02em; }
.titulo-xl { font-size: 48px; }
.titulo-l { font-size: 40px; }
.titulo-m { font-size: 36px; line-height: 1.02; }
.titulo-s { font-size: 28px; line-height: 1.05; letter-spacing: 0; }
.texto-tarjeta { margin: 0; font-size: 17px; line-height: 1.55; color: var(--parrafo-oscuro); }
.texto-chico { font-size: 16px; }
.nota-tarjeta { margin: 0; font-family: var(--mono); font-size: 13px; }
.cita-tarjeta { margin: 0; font-size: 20px; line-height: 1.4; font-weight: 700; }
.enlaces { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.casa .enlace-caja {
  align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--borde-enlace); font-family: var(--mono); font-size: 14px; text-decoration: none;
}
.casa .enlace-caja:hover { border-color: var(--amarillo); }
.al-fondo { margin-top: auto; }
.etiqueta {
  align-self: flex-start; padding: 4px 10px; background: var(--amarillo); color: var(--tinta);
  font-family: var(--mono); font-size: 12px; font-weight: 600;
}
.cotorrisa-info { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.cotorrisa-episodios { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; }
.cotorrisa-episodios .etiqueta-tarjeta { margin-bottom: 10px; }
.episodios { list-style: none; margin: 0; padding: 0; }
.episodios li {
  display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--borde-oscuro);
}
.episodios li:last-child { border-bottom: 1px solid var(--borde-oscuro); }
.episodios a { flex: 1 1 160px; min-width: 0; padding: 10px 0; font-size: 16px; text-underline-offset: 0.15em; }
.miniatura { flex: 0 0 96px; width: 96px; height: 54px; object-fit: cover; background: var(--mosaico); }
.vistas { font-family: var(--mono); font-size: 13px; }

.lista-datos { list-style: none; margin: 4px 0 0; padding: 0; font-family: var(--mono); font-size: 14px; }
.lista-datos li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--borde-oscuro); }
.lista-datos li:last-child { border-bottom: 1px solid var(--borde-oscuro); }

.ripe-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ripe-titulo { display: flex; flex-direction: column; gap: 10px; }
.productos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px; }
.productos li { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
/* La foto entera, sin recortar; el relleno toma el color del fondo de cada foto para no notarse. */
.foto-producto { display: block; width: 100%; height: 150px; object-fit: contain; background: #FFFFFF; }
.foto-producto[src$="aracnox.jpg"] { background: #DAD6DA; }
.foto-producto[src$="green-vision.jpg"] { background: #E2E7F1; }
.producto-nombre { font-size: 15px; font-weight: 700; }
.producto-precio { font-family: var(--mono); font-size: 13px; }

.cleto-cabeza { display: flex; align-items: center; gap: 16px; }
.foto-cleto { flex: 0 0 88px; width: 88px; height: 88px; border-radius: 50%; background: #FFFFFF; }

/* El empaque entero a un lado del texto; en pantallas angostas se acomoda arriba. */
.chocolates-cuerpo { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
.foto-chocolate { flex: 0 0 132px; width: 132px; height: auto; aspect-ratio: 4 / 5; object-fit: contain; background: #EDEDED; }
.chocolates-texto { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }

.marcador { margin: 4px 0 0; font-family: var(--mono); font-size: 14px; }
.marcador div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--borde-oscuro); }
.marcador div:last-child { border-bottom: 1px solid var(--borde-oscuro); }
.marcador dd { margin: 0; text-align: right; }

.coleccion { margin: 0; display: flex; align-items: baseline; gap: 12px; }
.coleccion-numero { font-size: 88px; line-height: 0.9; font-weight: 800; letter-spacing: -0.04em; }
.coleccion-texto { font-size: 18px; line-height: 1.3; font-weight: 700; }

/* Carteles verticales; si la tarjeta queda muy ancha, se recortan por abajo. */
.cartel {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; max-height: 520px;
  object-fit: cover; object-position: top; background: var(--mosaico); border-bottom: 1px solid var(--borde-oscuro);
}
.cartel-texto { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.casa .boton-claro {
  align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  background: var(--fondo); color: var(--tinta); font-weight: 700; font-size: 15px; text-decoration: none;
}
.casa .boton-claro:hover { background: var(--amarillo); color: var(--tinta); }
.casa a:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; }

/* Reclamar */
.reclamar { position: relative; overflow: hidden; background: var(--amarillo); color: var(--tinta); }
.reclamar-contenido {
  padding: 112px 32px; display: flex; flex-wrap: wrap; gap: 56px; align-items: center; justify-content: space-between;
}
.reclamar-texto { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.titulo-reclamar { margin: 0; font-size: clamp(48px, 6vw, 96px); line-height: 0.95; font-weight: 800; letter-spacing: -0.035em; }
.reclamar-entrada { margin: 0; font-size: 20px; line-height: 1.5; max-width: 40ch; }
.reclamar-nota { margin: 0; font-family: var(--mono); font-size: 14px; }
.boton-negro {
  align-self: flex-start; display: inline-flex; align-items: center; min-height: 64px; padding: 0 32px;
  background: var(--tinta); color: var(--amarillo); font-weight: 800; font-size: 20px; text-decoration: none;
}
a.boton-negro:hover { color: #FFFFFF; }
.boton-negro:focus-visible { outline: 3px solid var(--tinta); outline-offset: 4px; }
.ficha {
  flex: 0 1 360px; min-width: 0; display: flex; flex-direction: column; background: #FFFFFF;
  border: 2px solid var(--tinta); box-shadow: 12px 12px 0 var(--tinta);
}
.ficha-barra {
  display: flex; justify-content: space-between; padding: 10px 14px; border-bottom: 2px solid var(--tinta);
  font-family: var(--mono); font-size: 12px; font-weight: 600;
}
.ficha-foto {
  height: 200px; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--tinta); color: var(--fondo);
  font-size: 40px; line-height: 0.95; font-weight: 800; letter-spacing: -0.03em; text-align: center;
}
.ficha-datos { padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; font-family: var(--mono); font-size: 14px; }
.ficha-nombre { font-family: var(--titulos); font-size: 22px; font-weight: 800; }
.ficha-datos s, .ficha-nota { color: var(--texto-viejo); }
.ficha-dueno { align-self: flex-start; padding: 6px 10px; background: var(--tinta); color: var(--amarillo); font-size: 12px; font-weight: 600; }
.ficha-nota { font-size: 12px; }

/* Pie */
.pie {
  max-width: 1280px; margin: 0 auto; padding: 40px 32px 56px; display: flex; flex-wrap: wrap; gap: 24px;
  justify-content: space-between; align-items: flex-start;
  font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--sec-claro);
}
.pie p { margin: 0; min-width: 0; }
.pie-firma { flex: 1 1 260px; }
.pie-aviso { flex: 2 1 420px; }
.pie-adios { flex: 0 0 auto; font-weight: 600; color: var(--tinta); }

@media (max-width: 767px) {
  .logros-contenido { padding: 56px 16px; gap: 24px; }
  .perfil { grid-template-columns: auto 1fr auto; gap: 12px 14px; padding: 14px; }
  .avatar { width: 58px; height: 58px; border-width: 3px; }
  .jugador-nombre { font-size: 22px; }
  .conteo { grid-column: 3; grid-row: 1; flex-direction: column; gap: 2px; font-size: 14px; }
  .conteo .trofeo { width: 18px; height: 18px; }
  .progreso { grid-column: 1 / -1; }
  .vitrina { gap: 12px; padding: 12px; }
  .fichas { gap: 8px; }
  .ficha-logro { padding: 10px 4px; }
  .ficha-logro .trofeo { width: 44px; height: 44px; }
  .js .logro-nombre {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .detalle { grid-template-columns: 56px 1fr; gap: 12px; padding: 14px; }
  .detalle .trofeo { width: 56px; height: 56px; }
  .detalle h3 { font-size: 22px; }
  .detalle-descripcion { font-size: 16px; }
  .pista-logros { padding: 0 12px 12px; }
  .casa-contenido { padding: 72px 16px; gap: 16px; }
  .hilera { gap: 16px; }
  .tarjeta { padding: 24px 20px; }
  .tarjeta-cartel { padding: 0; }
  .titulo-xl { font-size: 40px; }
  .titulo-l { font-size: 34px; }
  .titulo-m { font-size: 30px; }
  .casa-entrada { font-size: 17px; }
  .reclamar-contenido { padding: 72px 16px; gap: 40px; }
  .pista-carrito { height: 130px; }
  .carrito-loop { width: 160px; }
  .titulo-reclamar { font-size: 44px; }
  .reclamar-entrada { font-size: 18px; }
  .boton-negro { align-self: stretch; justify-content: center; padding: 0 16px; font-size: 17px; }
  .ficha { box-shadow: 8px 8px 0 var(--tinta); margin-right: 8px; }
  .ficha-foto { font-size: 32px; }
  .pie { padding: 32px 16px 48px; }
  .pie-aviso { flex-basis: 100%; }
}

/* 404 */
.error { min-height: 100vh; padding: 56px 16px; display: flex; align-items: center; justify-content: center; }
.ventana-error { flex: 0 1 580px; }
.barra-error { padding: 8px 12px; }
.cuadrito { width: 18px; height: 16px; background: var(--gris-ventana); border: 1px solid #FFFFFF; }
.error-cuerpo { padding: 32px 28px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; background: #FFFFFF; }
.error-texto { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.error-codigo { font-family: var(--titulos); font-size: 96px; line-height: 0.85; font-weight: 800; letter-spacing: -0.04em; }
.error-titulo { margin: 0; font-family: var(--titulos); font-size: 24px; line-height: 1.15; font-weight: 800; letter-spacing: 0; }
.error-nota { margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--texto-suave); }
.error-acciones {
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: flex-end;
  padding: 12px; border-top: 1px solid var(--linea);
}
.error-espera { margin: 0; font-size: 12px; color: var(--texto-viejo); }
.boton-azul {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  background: var(--acento); color: #FFFFFF; font-size: 12px; font-weight: 700; text-decoration: none;
}
a.boton-azul:hover { color: #FFFFFF; background: var(--acento-hover); }
.boton-azul:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }

/* Personajes que se asoman (asomos.js). Escondidos por defecto; solo se mueven con movimiento. */
.asomos { position: fixed; inset: 0; z-index: 20; overflow: hidden; pointer-events: none; }
.asomo { position: absolute; width: clamp(72px, 12vw, 140px); aspect-ratio: 1; }
.cara { width: 100%; height: 100%; }
.asomo img { display: block; width: 100%; height: 100%; transform-origin: 50% 100%; transform: translateY(105%); }
.asomo[data-esquina="abajo-izq"] { left: 4%; bottom: 0; }
.asomo[data-esquina="abajo-der"] { right: 4%; bottom: 0; }
.asomo[data-esquina="izq"] { left: 0; top: 18%; }
.asomo[data-esquina="der"] { right: 0; top: 18%; }
.asomo[data-esquina="abajo-der"] .cara { transform: scaleX(-1); }
.asomo[data-esquina="izq"] .cara { transform: rotate(90deg); }
.asomo[data-esquina="der"] .cara { transform: rotate(-90deg); }
/* Desde arriba se asoman de cabeza, como colgados del techo. */
.asomo[data-esquina^="arriba"] { top: 0; }
.asomo[data-esquina="arriba-izq"] { left: 22%; }
.asomo[data-esquina="arriba-der"] { right: 22%; }
.asomo[data-esquina^="arriba"] .cara { transform: rotate(180deg); }

/* Globo de Homero: la cola apunta a la cabeza; del lado derecho se voltea. */
.globo {
  position: absolute; bottom: 100%; left: 58%; padding: .35em .7em .4em; white-space: nowrap;
  background: #FFFFFF; color: var(--tinta); border: 3px solid var(--tinta); border-radius: 18px;
  font-family: var(--titulos); font-size: clamp(15px, 1.5vw, 22px); font-weight: 800; line-height: 1;
  transform-origin: 17px calc(100% + 19px); transform: scale(0);
}
.globo::before, .globo::after { content: ''; position: absolute; top: 100%; clip-path: polygon(0 0, 100% 0, 0 100%); }
.globo::before { left: 14px; width: 22px; height: 22px; background: var(--tinta); }
.globo::after { left: 17px; width: 15px; height: 15px; background: #FFFFFF; }
.asomo[data-esquina$="der"] .globo { left: auto; right: 58%; transform-origin: calc(100% - 17px) calc(100% + 19px); }
.asomo[data-esquina$="der"] .globo::before,
.asomo[data-esquina$="der"] .globo::after { left: auto; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.asomo[data-esquina$="der"] .globo::before { right: 14px; }
.asomo[data-esquina$="der"] .globo::after { right: 17px; }
.asomo[data-esquina="izq"] .globo { bottom: 72%; left: 66%; }
.asomo[data-esquina="der"] .globo { bottom: 72%; right: 66%; }
/* Arriba el globo va debajo de la cabeza y la cola apunta hacia arriba. */
.asomo[data-esquina^="arriba"] .globo { bottom: auto; top: 100%; transform-origin: 17px -19px; }
.asomo[data-esquina="arriba-der"] .globo { transform-origin: calc(100% - 17px) -19px; }
.asomo[data-esquina^="arriba"] .globo::before,
.asomo[data-esquina^="arriba"] .globo::after { top: auto; bottom: 100%; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.asomo[data-esquina="arriba-der"] .globo::before,
.asomo[data-esquina="arriba-der"] .globo::after { clip-path: polygon(100% 0, 100% 100%, 0 100%); }

/* Al principio de la sección negra, debajo de los logros, Slobo vuela con su gorra como en Flappy Bird.
   Es decorado, no se juega. Cielo de 200 y suelo de 28; los tubos van cada 240 px, uno con el hueco alto
   y otro con el bajo. Sale de orilla a orilla de la pantalla; 20 tubos alcanzan hasta pantallas de unos 3800 px. */
.flappy {
  --pajaro: clamp(96px, 22%, 280px);
  position: relative; height: 228px; overflow: hidden; pointer-events: none;
  background: #4EC0CA; image-rendering: pixelated;
}
/* Como la prensa pero al revés: por abajo se funde con el negro; Slobo vuela encima del degradado. */
.flappy::after {
  content: ''; position: absolute; inset: auto 0 0; height: 80px;
  background: linear-gradient(rgba(18, 18, 18, 0), var(--tinta));
}
.flappy-fondo {
  position: absolute; left: 0; bottom: 28px; width: calc(100% + 480px); height: 100px;
  background: url(img/flappy-fondo.svg) 0 0 / 480px 100px repeat-x;
}
.flappy-tubos { position: absolute; top: 0; bottom: 28px; left: calc(var(--pajaro) - 620px); display: flex; gap: 184px; padding-left: 16px; }
.tubo { position: relative; flex: none; width: 56px; }
.tubo i { position: absolute; left: 0; width: 56px; background: url(img/flappy-tubo.svg) 0 0 / 56px 2px repeat-y; }
.tubo i:first-child { top: 0; background: url(img/flappy-boca.svg) 0 100% / 56px 22px no-repeat, url(img/flappy-tubo.svg) 0 0 / 56px 2px repeat-y; }
.tubo i:last-child { bottom: 0; background: url(img/flappy-boca.svg) 0 0 / 56px 22px no-repeat, url(img/flappy-tubo.svg) 0 0 / 56px 2px repeat-y; }
.tubo-alto i:first-child, .tubo-bajo i:last-child { height: 34px; }
.tubo-alto i:last-child, .tubo-bajo i:first-child { height: 70px; }
/* Quieto, Slobo queda donde arranca el vuelo, con el ala en medio. */
.flappy-pajaro { position: absolute; z-index: 1; top: 0; left: var(--pajaro); width: 52px; height: 44px; transform: translateY(88.00px); }
.flappy-cara { width: 100%; height: 100%; background: url(img/slobo-flappy.svg) -56px 0 / 224px 44px no-repeat; transform: rotate(-3.8deg); }
.flappy-suelo {
  position: absolute; left: 0; bottom: 0; width: calc(100% + 480px); height: 28px;
  background: url(img/flappy-suelo.svg) 0 0 / 24px 28px repeat-x;
}
/* El marcador arriba al centro, con los números de Flappy; flappy.js suma un punto por tubo. */
.flappy-puntos { position: absolute; top: 14px; left: 50%; display: flex; transform: translateX(-50%); }
.flappy-puntos i { width: 24px; height: 33px; background: url(img/flappy-numeros.svg) 0 0 / 240px 33px no-repeat; }
.flappy-puntos .n1 { background-position: -24px 0; }
.flappy-puntos .n2 { background-position: -48px 0; }
.flappy-puntos .n3 { background-position: -72px 0; }
.flappy-puntos .n4 { background-position: -96px 0; }
.flappy-puntos .n5 { background-position: -120px 0; }
.flappy-puntos .n6 { background-position: -144px 0; }
.flappy-puntos .n7 { background-position: -168px 0; }
.flappy-puntos .n8 { background-position: -192px 0; }
.flappy-puntos .n9 { background-position: -216px 0; }
/* Al final de la sección negra Ricardo y Susana huyen de la prensa, en pixel art (scripts/prensa-dibujos.py).
   Cada sprite trae 8 cuadros de carrera; quieto, la persecución queda a la vista a la izquierda. */
.prensa {
  position: relative; height: 210px; overflow: hidden; pointer-events: none; container-type: inline-size;
  background: url(img/prensa-banqueta.svg) 0 100% / 48px 24px repeat-x, url(img/prensa-pared.svg) 0 0 / 96px 42px repeat;
}
.prensa::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 80px;
  background: linear-gradient(var(--tinta), rgba(18, 18, 18, 0));
}
.prensa-carrera { position: absolute; left: 24px; bottom: 12px; z-index: 1; display: flex; align-items: flex-end; gap: 56px; }
.prensa-pareja { display: flex; align-items: flex-end; }
.prensa-susana, .prensa-ricardo { flex: none; width: 72px; height: 114px; background: 0 0 / 576px 114px no-repeat; }
.prensa-susana { background-image: url(img/prensa-susana.svg); }
.prensa-ricardo { background-image: url(img/prensa-ricardo.svg); background-position: -288px 0; }
/* El relleno a la derecha guarda el espacio de la fila de atrás, que va corrida, para que salga completa de la pantalla. */
.prensa-bola { position: relative; padding-right: 60px; }
.prensa-fila { position: relative; z-index: 1; display: flex; align-items: flex-end; }
.prensa-fila .prensa-paparazzo + .prensa-paparazzo { margin-left: -14px; }
/* La segunda fila va más atrás: más arriba, corrida y en sombra. */
.prensa-atras { position: absolute; z-index: 0; left: 44px; bottom: 14px; filter: brightness(.62); }
.prensa-paparazzo { position: relative; flex: none; width: 84px; height: 114px; background: 0 0 / 672px 114px no-repeat; }
.prensa-reportera { background-image: url(img/prensa-reportera.svg); }
.prensa-fotografo { background-image: url(img/prensa-fotografo.svg); }
.prensa-camarografo { background-image: url(img/prensa-camarografo.svg); }
.prensa-sonidista { background-image: url(img/prensa-sonidista.svg); }
.prensa-flash { position: absolute; left: 10px; top: 4px; width: 33px; height: 33px; background: url(img/prensa-flash.svg) 0 0 / 33px 33px no-repeat; opacity: 0; }
.prensa-fila:not(.prensa-atras) .prensa-flash { opacity: 1; }
.prensa-globo {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 5px 8px; white-space: nowrap;
  background: #FFFFFF; border: 3px solid var(--tinta); font-family: var(--mono); font-size: 13px; font-weight: 700; line-height: 1; color: var(--tinta);
}
/* Colita del globo en escalón, como pixel. */
.prensa-globo::after {
  content: ''; position: absolute; top: 100%; left: 16px; width: 9px; height: 9px;
  background: linear-gradient(var(--tinta) 0 0) 0 0 / 3px 9px no-repeat, linear-gradient(var(--tinta) 0 0) 0 6px / 9px 3px no-repeat,
    linear-gradient(#FFFFFF 0 0) 3px 0 / 6px 6px no-repeat;
}
.prensa-atras .prensa-globo { bottom: calc(100% - 2px); }

/* Hasta abajo de la página, debajo del pie, el carrito corre sin parar por su pista;
   con movimiento reducido se queda estacionado. La pista recorta al carrito cuando sale por la derecha. */
.pista-carrito {
  position: relative; overflow: hidden; height: 160px; border-top: 3px solid var(--tinta);
  background: repeating-linear-gradient(90deg, transparent 0 40px, rgba(18, 18, 18, .12) 40px 80px) 0 100% / 100% 10px no-repeat;
}
.carrito-loop {
  position: absolute; left: 32px; bottom: 8px; width: 210px; aspect-ratio: 3 / 2;
  background: url(img/ricardo-carrito.svg) center / contain no-repeat;
}

/* Movimiento. Todo vive aquí: con movimiento reducido la página queda quieta y completa.
   Lo que se esconde hasta entrar en pantalla además necesita html.anima (bandeja.js). */
@media (prefers-reduced-motion: no-preference) {
  @keyframes sube { from { opacity: 0; transform: translateY(18px); } }
  @keyframes llega { from { opacity: 0; transform: translateY(10px); } }
  @keyframes entra-vista { from { opacity: 0; transform: translateY(8px); } }
  @keyframes llamada {
    0%, 12%, 100% { transform: translateX(0); }
    2% { transform: translateX(-4px); }
    4% { transform: translateX(4px); }
    6% { transform: translateX(-3px); }
    8% { transform: translateX(2px); }
    10% { transform: translateX(-1px); }
  }
  @keyframes flota { 50% { transform: translateY(-6px) rotate(-1.5deg); } }
  @keyframes brillo { 0% { transform: translateX(-120%); } 45%, 100% { transform: translateX(120%); } }
  @keyframes asoma {
    0% { transform: translateY(105%) rotate(0deg); }
    14% { transform: translateY(6%) rotate(-5deg); }
    22% { transform: translateY(10%) rotate(3deg); }
    34% { transform: translateY(8%) rotate(-2deg); }
    58% { transform: translateY(8%) rotate(2deg); }
    70% { transform: translateY(11%) rotate(0deg); }
    88%, 100% { transform: translateY(105%) rotate(0deg); }
  }
  @keyframes globo {
    0%, 18% { transform: scale(0) rotate(-10deg); }
    23% { transform: scale(1.15) rotate(3deg); }
    27%, 64% { transform: scale(1) rotate(-3deg); }
    70%, 100% { transform: scale(0) rotate(-10deg); }
  }

  /* Portada */
  .heroe-texto > * { animation: sube .7s cubic-bezier(.2, .7, .2, 1) backwards; }
  .heroe-texto > :nth-child(2) { animation-delay: .08s; }
  .heroe-texto > :nth-child(3) { animation-delay: .16s; }
  .heroe-texto > :nth-child(4) { animation-delay: .24s; }
  .heroe-texto > :nth-child(5) { animation-delay: .32s; }
  .heroe-texto > :nth-child(6) { animation-delay: .4s; }
  @keyframes cursor { 50% { opacity: 0; } }
  .cursor { animation: cursor 1.1s steps(1) infinite; }
  .heroe .ventana { animation: sube .8s cubic-bezier(.2, .7, .2, 1) .2s backwards; }

  /* Bandeja: los renglones llegan uno por uno la primera vez; el amarillo llama hasta que lo leen. */
  .panel { overflow: clip; }
  .js .vista { animation: entra-vista .3s ease-out; }
  #vista-bandeja .renglon { --n: 0; }
  #vista-bandeja .fila:nth-of-type(2) { --n: 1; }
  #vista-bandeja .fila:nth-of-type(3) { --n: 2; }
  #vista-bandeja .fila:nth-of-type(4) { --n: 3; }
  #vista-bandeja .vieja { --n: 4; }
  .ventana:not([data-vuelta]) #vista-bandeja .renglon {
    animation: llega .45s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(.5s + var(--n) * 70ms);
  }
  .ventana:not([data-vuelta]) #vista-bandeja .fila.amarilla {
    animation: llega .45s cubic-bezier(.2, .7, .2, 1) .5s backwards, llamada 6s ease-in-out 2.5s infinite;
  }
  .ventana[data-vuelta]:not([data-leida]) #vista-bandeja .fila.amarilla { animation: llamada 6s ease-in-out 2.5s infinite; }

  /* Sobre: flota y brilla como carta holográfica. */
  .carta-rara::after {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; transform: translateX(-120%);
    background: linear-gradient(105deg, transparent 35%, rgba(255, 226, 74, .22) 45%, rgba(255, 255, 255, .4) 50%, rgba(31, 59, 255, .18) 56%, transparent 66%);
    animation: brillo 3.6s ease-in-out 1.2s infinite;
  }
  .paquete { animation: flota 3.6s ease-in-out infinite; }
  .paquete-frente { position: relative; overflow: hidden; }
  .paquete-frente::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
    background: linear-gradient(105deg, transparent 35%, rgba(255, 226, 74, .2) 45%, rgba(255, 255, 255, .3) 50%, rgba(31, 59, 255, .2) 56%, transparent 66%);
    animation: brillo 3.2s ease-in-out 1s infinite;
  }

  /* Lo de abajo sube al entrar en pantalla. */
  .anima :is(.seccion-cabeza, .consola, .tarjeta, .reclamar-texto, .ficha) {
    transition: opacity .7s ease-out, transform .7s cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(var(--orden, 0) * 90ms);
  }
  .anima :is(.seccion-cabeza, .consola, .tarjeta, .reclamar-texto, .ficha):not(.visto) { opacity: 0; transform: translateY(28px); }

  /* El trofeo de platino brilla como el sobre; el aviso de logro baja desde arriba. */
  .ficha-platino { position: relative; overflow: hidden; }
  .ficha-platino::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
    background: linear-gradient(105deg, transparent 35%, rgba(169, 216, 245, .3) 45%, rgba(255, 255, 255, .4) 50%, transparent 62%);
    animation: brillo 3.2s ease-in-out 1s infinite;
  }
  @keyframes aviso { from { opacity: 0; transform: translate(-50%, -24px); } }
  .aviso-logro { animation: aviso .4s cubic-bezier(.2, .7, .2, 1); }

  @keyframes alerta { 50% { opacity: .3; } }
  .alerta { animation: alerta .8s steps(1) 6; }

  .asomo img { animation: asoma 4s ease-in-out both; }
  .globo { animation: globo 4s ease-in-out both; }

  /* Ricardo cruza el final de la página con el carrito, traqueteando. */
  @keyframes traqueteo { 50% { translate: 0 -3px; } }
  @keyframes carrito-loop { from { transform: translateX(-100%); } to { transform: translateX(100vw); } }
  .carrito-loop { left: 0; animation: carrito-loop 8s linear infinite, traqueteo .35s steps(1) infinite; }

  /* Flappy: el mundo corre a 120 px/s (la ciudad a la mitad) y en 4 s pasan dos tubos. Slobo aletea con
     la física del juego (cada tramo es una parábola, exacta en su cubic-bezier) y cruza cada hueco con
     unos 14 px de aire arriba y abajo. Los keyframes salen de scripts/flappy-vuelo.py; el ciclo cierra sin brinco. */
  @keyframes flappy-avance { to { transform: translateX(-480px); } }
  @keyframes flappy-aleteo { from { background-position: 0 0; } to { background-position: -224px 0; } }
  @keyframes flappy-vuelo {
    0% { transform: translateY(88.00px); animation-timing-function: cubic-bezier(.3333, 0.6667, .6667, 1.0000); }
    5.171% { transform: translateY(63.34px); animation-timing-function: cubic-bezier(.3333, -0.0000, .6667, 0.3333); }
    8.675% { transform: translateY(74.66px); animation-timing-function: cubic-bezier(.3333, 0.6667, .6667, 1.0000); }
    14.313% { transform: translateY(45.34px); animation-timing-function: cubic-bezier(.3333, -0.0000, .6667, 0.3333); }
    19.952% { transform: translateY(74.66px); animation-timing-function: cubic-bezier(.3333, 0.6667, .6667, 1.0000); }
    25.59% { transform: translateY(45.34px); animation-timing-function: cubic-bezier(.3333, 0.0000, .6667, 0.3333); }
    31.229% { transform: translateY(74.66px); animation-timing-function: cubic-bezier(.3333, 0.6667, .6667, 1.0000); }
    36.867% { transform: translateY(45.34px); animation-timing-function: cubic-bezier(.3333, 0.0000, .6667, 0.3333); }
    42.506% { transform: translateY(74.66px); animation-timing-function: cubic-bezier(.3333, 0.6667, .6667, 1.0000); }
    48.144% { transform: translateY(45.34px); animation-timing-function: cubic-bezier(.3333, 0.0000, .6667, 0.3333); }
    56.56% { transform: translateY(110.66px); animation-timing-function: cubic-bezier(.3333, 0.6667, .6667, 1.0000); }
    62.199% { transform: translateY(81.34px); animation-timing-function: cubic-bezier(.3333, -0.0000, .6667, 0.3333); }
    67.837% { transform: translateY(110.66px); animation-timing-function: cubic-bezier(.3333, 0.6667, .6667, 1.0000); }
    73.476% { transform: translateY(81.34px); animation-timing-function: cubic-bezier(.3333, -0.0000, .6667, 0.3333); }
    79.114% { transform: translateY(110.66px); animation-timing-function: cubic-bezier(.3333, 0.6667, .6667, 1.0000); }
    84.753% { transform: translateY(81.34px); animation-timing-function: cubic-bezier(.3333, -0.0000, .6667, 0.3333); }
    90.391% { transform: translateY(110.66px); animation-timing-function: cubic-bezier(.3333, 0.6667, .6667, 1.0000); }
    96.03% { transform: translateY(81.34px); animation-timing-function: cubic-bezier(.3333, -0.0000, .6667, 0.3333); }
    99.533% { transform: translateY(92.66px); animation-timing-function: cubic-bezier(.3333, 0.3477, .6667, 0.6811); }
    100% { transform: translateY(88.00px); }
  }
  @keyframes flappy-giro {
    0% { transform: rotate(-3.8deg); }
    1.033% { transform: rotate(-25.0deg); }
    3.533% { transform: rotate(-25.0deg); }
    8.675% { transform: rotate(5.9deg); }
    10.175% { transform: rotate(-25.0deg); }
    12.675% { transform: rotate(-25.0deg); }
    19.953% { transform: rotate(18.7deg); }
    21.453% { transform: rotate(-25.0deg); }
    23.953% { transform: rotate(-25.0deg); }
    31.23% { transform: rotate(18.7deg); }
    32.73% { transform: rotate(-25.0deg); }
    35.23% { transform: rotate(-25.0deg); }
    42.505% { transform: rotate(18.7deg); }
    44.005% { transform: rotate(-25.0deg); }
    46.505% { transform: rotate(-25.0deg); }
    56.56% { transform: rotate(35.0deg); }
    58.06% { transform: rotate(-25.0deg); }
    60.56% { transform: rotate(-25.0deg); }
    67.837% { transform: rotate(18.7deg); }
    69.337% { transform: rotate(-25.0deg); }
    71.838% { transform: rotate(-25.0deg); }
    79.115% { transform: rotate(18.7deg); }
    80.615% { transform: rotate(-25.0deg); }
    83.115% { transform: rotate(-25.0deg); }
    90.39% { transform: rotate(18.7deg); }
    91.89% { transform: rotate(-25.0deg); }
    94.39% { transform: rotate(-25.0deg); }
    99.532% { transform: rotate(5.9deg); }
    100% { transform: rotate(-3.8deg); }
  }
  .flappy-tubos, .flappy-suelo { animation: flappy-avance 4s linear infinite; }

  /* La persecución cruza la pantalla de derecha a izquierda despacio, para que se vea quién huye y se lean los
     globos, y descansa un rato fuera antes de volver. */
  @keyframes prensa-cruce { from { transform: translateX(0); } 80%, to { transform: translateX(calc(-100cqw - 100%)); } }
  /* Las zancadas arrancan siempre del primer cuadro: el desfase de cada quien va en animation-delay. */
  @keyframes prensa-zancada { from { background-position: 0 0; } to { background-position: -576px 0; } }
  @keyframes prensa-zancada-paparazzi { from { background-position: 0 0; } to { background-position: -672px 0; } }
  /* Cada globo dura dos segundos y cuarto a la vista; los tres van desfasados un tercio para que siempre haya uno. */
  @keyframes prensa-globo {
    from { opacity: 0; transform: translateX(-50%) scale(.6); }
    6%, 56% { opacity: 1; transform: translateX(-50%) scale(1); }
    62%, to { opacity: 0; transform: translateX(-50%) scale(1); }
  }
  @keyframes prensa-flash { from, 10% { opacity: 1; } 14%, to { opacity: 0; } }
  .prensa-carrera { left: 100%; animation: prensa-cruce 22s linear infinite; }
  .prensa-susana { animation: prensa-zancada .64s steps(8) infinite; }
  .prensa-ricardo { animation: prensa-zancada .64s steps(8) -.32s infinite; }
  .prensa-paparazzo { animation: prensa-zancada-paparazzi .64s steps(8) infinite; }
  .prensa-paparazzo:nth-child(2n) { animation-delay: -.16s; }
  .prensa-paparazzo:nth-child(3n) { animation-delay: -.48s; }
  .prensa-globo { animation: prensa-globo 4.5s ease-out infinite; }
  .prensa-fila:not(.prensa-atras) .prensa-paparazzo:nth-child(3) .prensa-globo { animation-delay: -1.5s; }
  .prensa-atras .prensa-globo { animation-delay: -3s; }
  .prensa-flash { animation: prensa-flash 1.3s steps(1) infinite; }
  .prensa-fila:not(.prensa-atras) .prensa-flash { animation-delay: -.5s; }
  .prensa-atras .prensa-paparazzo:last-child .prensa-flash { animation-delay: -.9s; }
  /* El cruce dura según el ancho, para que la rapidez se parezca en el celular y en pantallas muy anchas. */
  @media (max-width: 767px) { .prensa-carrera { animation-duration: 13s; } }
  @media (min-width: 2000px) { .prensa-carrera { animation-duration: 30s; } }
  .flappy-fondo { animation: flappy-avance 8s linear infinite; }
  .flappy-pajaro { animation: flappy-vuelo 4s linear infinite; }
  .flappy-cara { animation: flappy-giro 4s linear infinite, flappy-aleteo .36s steps(4) infinite; }
}