:root{
  --papel:#F2F2EF; --papel-2:#E9E8E3; --tinta:#1C1B1A; --tenue:#6E6B66;
  --rojo:#A8352C; --azul:#2B4C8C; --regla:#D6D3CB;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:ui-sans-serif,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--papel:#16150F; --papel-2:#201E17; --tinta:#EDEAE0; --tenue:#9B968A;
        --rojo:#E08B7F; --azul:#8FB0E8; --regla:#332F26;}
}
/* El unico boton del sitio: enviar un chiste (enviar.htm) */
.boton{display:inline-block;background:var(--rojo);color:var(--papel);
  font-family:var(--sans);font-size:.95rem;font-weight:600;
  padding:.7em 1.4em;border-radius:2px;text-decoration:none;
  border:1px solid transparent}
.boton:hover,.boton:focus-visible{background:var(--tinta);color:var(--papel)}
@media (prefers-color-scheme:dark){
  .boton{color:#16150F} .boton:hover,.boton:focus-visible{color:#16150F}
}
.nota{font-family:var(--sans);font-size:.88rem;color:var(--tenue);
  max-width:62ch;line-height:1.55}
/* El HTML de ejemplo de recomienda.htm: para leer y copiar */
pre.codigo{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:.82rem;line-height:1.5;background:var(--papel-2);
  border:1px solid var(--regla);border-radius:2px;padding:1em;
  overflow-x:auto;white-space:pre-wrap;word-break:break-word;max-width:72ch}
*{box-sizing:border-box}
body{margin:0;background:var(--papel);color:var(--tinta);
     font:19px/1.62 var(--serif);
     -webkit-text-size-adjust:100%}

/* Cabecera de publicacion, no barra de color */
.masthead{border-bottom:3px double var(--regla);margin-bottom:30px}
.masthead .caja{max-width:41rem;margin:0 auto;padding:26px 20px 16px}
.masthead .nombre{display:block;line-height:0}
.masthead .nombre img{max-width:100%;height:auto;display:block}
/* El GIF es de 1999 y esta pensado para pantallas de entonces: se deja a
   su tamano natural como maximo, para que no se vea pixelado al estirarlo. */
.masthead .caja{max-width:min(41rem,640px)}
.masthead .lema{font-family:var(--sans);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tenue);margin:8px 0 0}
.masthead nav{max-width:41rem;margin:0 auto;padding:0 20px 14px;
  display:flex;flex-wrap:wrap;gap:4px 20px;font-family:var(--sans);font-size:.82rem}
.masthead nav a{color:var(--tenue);text-decoration:none;padding:3px 0;
  border-bottom:2px solid transparent}
.masthead nav a:hover,.masthead nav a:focus-visible{color:var(--tinta);border-bottom-color:var(--rojo)}

main{max-width:41rem;margin:0 auto;padding:0 20px 72px}
h1{font-size:clamp(1.5rem,4vw,2rem);line-height:1.18;margin:0 0 10px;
   letter-spacing:-.012em;text-wrap:balance}
.epig{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tenue);margin:0 0 26px}
p{margin:0 0 1.05em}
a{color:var(--azul);text-underline-offset:2px}
a:hover{color:var(--rojo)}
img{max-width:100%;height:auto}
hr{border:0;border-top:1px solid var(--regla);margin:30px 0}
ol,ul{padding-left:1.25em}
li{margin:0 0 .7em}
blockquote{margin:0 0 1.05em;padding-left:1em;border-left:3px solid var(--regla);
  color:var(--tenue);font-style:italic}

/* Navegacion entre secciones de chistes */
nav.sub{font-family:var(--sans);font-size:.84rem;display:flex;flex-wrap:wrap;
  gap:4px 18px;margin:0 0 24px;padding:0 0 16px;border-bottom:1px solid var(--regla)}
nav.sub a{color:var(--azul);text-decoration:none}
nav.sub a:hover{text-decoration:underline}
nav.sub .aqui{color:var(--tinta);font-weight:700}

/* El aviso original de la seccion */
.aviso{font-family:var(--sans);font-size:.88rem;line-height:1.5;
  color:var(--tenue);border-left:3px solid var(--rojo);
  padding:2px 0 2px 14px;margin:0 0 26px}
.aviso a{color:var(--rojo)}

/* Portada: indice del archivo */
.intro{font-size:1.05rem;color:var(--tenue);margin:0 0 30px;max-width:34rem}
.indice{border-top:1px solid var(--regla)}
.indice a{display:grid;grid-template-columns:2.2rem 1fr auto;gap:0 16px;
  align-items:baseline;padding:15px 2px;border-bottom:1px solid var(--regla);
  text-decoration:none;color:var(--tinta)}
.indice a:hover,.indice a:focus-visible{background:var(--papel-2)}
.indice .n{font-family:var(--sans);font-size:.72rem;color:var(--tenue);
  font-variant-numeric:tabular-nums}
.indice .t{font-weight:700;font-size:1.06rem}
.indice .d{display:block;font-size:.92rem;color:var(--tenue);font-weight:400;
  margin-top:2px}
.indice .c{font-family:var(--sans);font-size:.74rem;color:var(--tenue);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* Frases: la pagina unificada */
h2.bloque{font-size:1.22rem;margin:34px 0 4px;padding-top:20px;
  border-top:1px solid var(--regla)}
section h3{font-family:var(--sans);font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tenue);font-weight:600;margin:20px 0 14px}
section h3 .cuenta{font-weight:400;opacity:.75;letter-spacing:.04em;
  text-transform:none;font-variant-numeric:tabular-nums}
figure.frase{margin:0 0 20px;padding-left:16px;border-left:2px solid var(--regla)}
figure.frase blockquote{margin:0;padding:0;border:0;font-style:italic;
  color:var(--tinta)}
figure.frase figcaption{margin-top:4px;font-family:var(--sans);font-size:.78rem;
  color:var(--tenue)}
.pie{border-top:1px solid var(--regla);margin-top:44px;padding-top:18px;
  font-family:var(--sans);font-size:.8rem;line-height:1.55;color:var(--tenue)}

/* Portada: el banner y los iconos de siempre, bien colocados */
.cita{margin:0 0 34px;padding:0 0 0 18px;border-left:3px solid var(--rojo)}
.cita figure{margin:0}
.cita.entra blockquote,.cita.entra figcaption{animation:aparece .45s ease both}
@keyframes aparece{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cita.entra blockquote,.cita.entra figcaption{animation:none}}
.cita{min-height:5.4em}
.cita blockquote{margin:0;font-size:1.06rem;font-style:italic;line-height:1.5}
.cita figcaption{margin-top:6px;font-family:var(--sans);font-size:.76rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tenue)}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));
  gap:14px;margin:0 0 30px}
.seccion{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:6px;padding:16px 10px;border:1px solid var(--regla);border-radius:12px;
  background:var(--papel-2);text-decoration:none;color:var(--tinta);
  transition:border-color .12s ease,transform .12s ease}
.seccion:hover,.seccion:focus-visible{border-color:var(--rojo);transform:translateY(-2px)}
.seccion img{width:64px;height:64px;image-rendering:auto}
.seccion .t{font-weight:700;font-size:.98rem;line-height:1.2}
.seccion .d{font-family:var(--sans);font-size:.76rem;color:var(--tenue);line-height:1.35}
.seccion .c{font-family:var(--sans);font-size:.7rem;color:var(--tenue);
  font-variant-numeric:tabular-nums;opacity:.8}
.firma{text-align:right;margin:0 0 6px}
.firma img{opacity:.85}
@media (prefers-reduced-motion:reduce){.seccion{transition:none}
  .seccion:hover{transform:none}}

/* Insignias de clasificacion (antes eran GIF sin etiqueta) */
.ins{display:inline-flex;align-items:center;gap:.35em;font-family:var(--sans);
  font-size:.72rem;letter-spacing:.03em;padding:.2em .55em;border-radius:999px;
  border:1px solid var(--regla);color:var(--tenue);white-space:nowrap;
  vertical-align:middle;margin:0 .2em .3em 0}
.ins .rombos{letter-spacing:.06em}
.ins.nivel.n2,.ins.nivel.n3{color:var(--rojo);border-color:var(--rojo)}
.ins.cal.bueno{color:var(--azul);border-color:var(--azul);font-weight:600}
.ins.cal.malo{opacity:.6}

table{border-collapse:collapse;width:100%}
.tabla-scroll{overflow-x:auto}

@media (max-width:620px){
  body{font-size:18px}
  .indice a{grid-template-columns:1fr auto}
  .indice .n{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
:focus-visible{outline:2px solid var(--rojo);outline-offset:2px}