@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); }
.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); }
.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 { color: var(--texto-viejo); }
.firma-cleto { display: flex; align-items: center; gap: 10px; color: var(--texto-suave); }
.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: 44px; line-height: 0.9; font-weight: 800; letter-spacing: -0.03em; }
.paquete-edicion { font-family: var(--mono); font-size: 11px; color: var(--parrafo-oscuro); }
.carta-rara {
  width: 248px; padding: 10px; display: flex; flex-direction: column; gap: 8px; background: #FFFFFF;
  border: 8px solid var(--tinta); box-shadow: 0 20px 40px -16px rgba(18, 18, 18, 0.5);
}
.carta-nombre { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-family: var(--titulos); font-size: 18px; font-weight: 800; }
.carta-pv { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--acento); }
.carta-arte {
  height: 128px; display: flex; align-items: center; justify-content: center; padding: 10px;
  background: repeating-linear-gradient(120deg, var(--amarillo) 0 8px, #FFF1A0 8px 16px); border: 1px solid var(--tinta);
}
.carta-tipo { font-family: var(--mono); font-size: 10px; color: var(--texto-viejo); }
.carta-ataque {
  display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 2px 8px; padding-top: 6px;
  border-top: 1px solid var(--linea-clara); font-family: var(--ventana);
}
.ataque-nombre { font-size: 12px; font-weight: 700; }
.ataque-dano { font-size: 13px; font-weight: 700; text-align: right; }
.ataque-texto { grid-column: 1; font-size: 10px; line-height: 1.4; color: var(--texto-suave); }
.carta-pie { padding-top: 6px; border-top: 1px solid var(--linea-clara); 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,
.js .ventana[data-vista="cleto"] #vista-cleto { 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; }

/* Saga */
.saga { overflow-x: clip; background: #FFFFFF; border-top: 1px solid var(--linea-clara); border-bottom: 1px solid var(--linea-clara); }
.saga-contenido { padding: 96px 32px; display: flex; flex-direction: column; gap: 40px; }
.actos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px; }
.acto {
  flex: 1 1 260px; min-width: 0; min-height: 260px; padding: 24px; display: flex; flex-direction: column; gap: 12px;
  background: var(--fondo); border: 1px solid var(--linea-clara);
}
.acto-numero { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sec-claro); }
.acto-usuario { font-family: var(--mono); font-size: 24px; font-weight: 600; overflow-wrap: anywhere; }
.acto-texto { font-size: 17px; line-height: 1.45; color: var(--texto-entrada); }
.sello {
  margin-top: auto; align-self: flex-start; padding: 4px 10px; border: 2px solid var(--tinta);
  font-family: var(--mono); font-size: 13px; font-weight: 600; --giro: -4deg; transform: rotate(var(--giro));
}
.acto:nth-child(2) .sello { --giro: 3deg; }
.acto:nth-child(3) .sello { --giro: -3deg; }
.acto-hoy { background: var(--amarillo); border: 2px solid var(--tinta); }
.acto-hoy .acto-numero, .acto-hoy .acto-texto { color: var(--tinta); }
.sello-tuyo { background: var(--tinta); color: var(--amarillo); --giro: 2deg; }

/* Catálogo */
.casa { 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;
}
.mosaico {
  display: flex; align-items: center; justify-content: center; padding: 12px; background: var(--mosaico); color: var(--fondo);
  font-family: var(--titulos); font-weight: 800; letter-spacing: -0.02em; line-height: 0.95; text-align: center;
}

.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; }
.mosaico-ep { flex: 0 0 96px; height: 54px; padding: 0; font-size: 26px; }
.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; }
.mosaico-producto { height: 150px; font-size: 26px; }
.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; }
.mosaico-cleto { flex: 0 0 88px; height: 88px; padding: 0; border-radius: 50%; font-size: 22px; }

.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; }
.pasaporte {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px;
  font-family: var(--mono); font-size: 14px; font-weight: 600;
}
.pasaporte li { padding: 6px 12px; border: 2px solid var(--fondo); border-radius: 999px; transform: rotate(-3deg); }
.pasaporte li:nth-child(2) { transform: rotate(2deg); }
.pasaporte li:nth-child(3) { transform: rotate(-1deg); }
.pasaporte li:nth-child(4) { transform: rotate(4deg); }
.pasaporte li:nth-child(5) { transform: rotate(-2deg); }
.pasaporte .sello-amarillo { border-color: var(--amarillo); color: var(--amarillo); transform: rotate(3deg); }

.mosaico-cartel { height: 190px; padding: 16px; font-size: 40px; 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 { 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) {
  .saga-contenido { padding: 64px 16px; gap: 28px; }
  .acto { min-height: 0; gap: 10px; }
  .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; }
  .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); }

/* 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%; }

/* 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 sello {
    0% { opacity: 0; transform: scale(2) rotate(calc(var(--giro) - 16deg)); animation-timing-function: cubic-bezier(.55, 0, .9, .4); }
    55% { opacity: 1; transform: scale(.94) rotate(var(--giro)); animation-timing-function: ease-out; }
    75% { transform: scale(1.03) rotate(var(--giro)); }
    100% { opacity: 1; transform: scale(1) rotate(var(--giro)); }
  }
  @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 .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. */
  .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; los sellos caen después de su acto. */
  .anima :is(.seccion-cabeza, .acto, .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, .acto, .tarjeta, .reclamar-texto, .ficha):not(.visto) { opacity: 0; transform: translateY(28px); }
  .anima .acto.visto .sello { animation: sello .6s both; animation-delay: calc(var(--orden, 0) * 90ms + .45s); }

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