/*
Theme Name: Asimov Ciencia Ficción
Description: Theme a medida de asimovcienciaficcion.com. Sin dependencias externas.
Author: El archivero
Version: 1.0.0
Text Domain: acom
*/

:root{
  --acom-fondo:#06070f; --acom-texto:#e8edff; --acom-tenue:#95a0cc;
  --acom-linea:#1c2340; --acom-acento:#4de0f0; --acom-acento-suave:#0e1630;
  --acom-medida:62ch;
  --acom-t0:1rem; --acom-t1:1.414rem; --acom-t2:1.999rem;
  --acom-t3:2.827rem; --acom-t4:3.998rem; --acom-tm:0.707rem;
  --acom-ritmo:1.72;
}

*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl{margin:0}
ul[class],ol[class]{list-style:none;padding:0}

html{-webkit-text-size-adjust:100%}
body{
  background:var(--acom-fondo); color:var(--acom-texto);
  font-family:'Space Grotesk', system-ui, sans-serif; font-size:clamp(1.02rem,0.3vw + 1rem,1.14rem);
  line-height:var(--acom-ritmo); font-synthesis:none;
  text-rendering:optimizeLegibility;
}
img,picture,svg{max-width:100%;height:auto;display:block}

.acom-salto{position:absolute;left:-9999px;top:0}
.acom-salto:focus{left:0;padding:.6rem 1rem;background:var(--acom-acento);color:#fff;z-index:99}

.acom-envoltura{width:min(100% - 2.4rem,68rem);margin-inline:auto}

h1,h2,h3,h4{font-family:'Orbitron', 'Eurostile', 'Helvetica Neue', sans-serif;line-height:1.15;letter-spacing:0.02em;font-weight:600}
h1{font-size:var(--acom-t4)}
h2{font-size:var(--acom-t2);margin-block:2.4em .5em}
h3{font-size:var(--acom-t1);margin-block:1.8em .4em}
p,ul,ol,blockquote,figure,table{margin-block:0 1.15em}
a{color:inherit;text-decoration-color:var(--acom-acento);text-underline-offset:.18em;
  text-decoration-thickness:.08em}
a:hover{color:var(--acom-acento)}

.acom-cabecera{border-bottom:1px solid var(--acom-linea);padding-block:1.15rem;margin-bottom:3rem}
.acom-cabecera-fila{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:baseline;
  justify-content:space-between}
.acom-marca{font-family:'Orbitron', 'Eurostile', 'Helvetica Neue', sans-serif;font-size:var(--acom-t1);font-weight:700;
  text-decoration:none;letter-spacing:0.02em}
.acom-lema{color:var(--acom-tenue);font-size:var(--acom-tm)}
.acom-nav{display:flex;gap:1.4rem;flex-wrap:wrap;font-size:var(--acom-tm)}
.acom-nav a{text-decoration:none;color:var(--acom-tenue)}
.acom-nav a:hover{color:var(--acom-acento)}

main{display:block}
.acom-prosa{max-width:var(--acom-medida)}
.acom-prosa h2,.acom-prosa h3{max-width:var(--acom-medida)}
.acom-prosa table{width:100%;border-collapse:collapse;font-size:var(--acom-tm)}
.acom-prosa th,.acom-prosa td{text-align:left;padding:.55rem .7rem;
  border-bottom:1px solid var(--acom-linea);vertical-align:top}
.acom-prosa th{font-weight:600}
.acom-prosa blockquote{border-left:3px solid var(--acom-acento);padding-left:1.1rem;
  color:var(--acom-tenue)}
.acom-prosa code{background:var(--acom-acento-suave);padding:.12em .35em;border-radius:3px;
  font-size:.9em}
.acom-prosa pre{background:var(--acom-acento-suave);padding:1rem;overflow-x:auto;border-radius:4px}
.acom-prosa figure figcaption{font-size:var(--acom-tm);color:var(--acom-tenue);
  margin-top:.5rem}

.acom-meta{color:var(--acom-tenue);font-size:var(--acom-tm);margin-bottom:2.2rem}
.acom-meta time{white-space:nowrap}

.acom-lista{display:grid;gap:2.6rem;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2.4rem 3rem;}
.acom-item{border-bottom:1px solid var(--acom-linea);padding-bottom:2.2rem}
.acom-item:last-child{border-bottom:0}
.acom-item img{margin-bottom:.9rem;aspect-ratio:16/9;object-fit:cover}
.acom-item{border-bottom:0;padding-bottom:0}
.acom-item h2{margin-block:0 .35em;font-size:var(--acom-t1)}
.acom-item a{text-decoration:none}
.acom-item p{color:var(--acom-tenue);max-width:var(--acom-medida)}
.acom-fecha{display:block;font-size:var(--acom-tm);color:var(--acom-tenue);
  margin-bottom:.35rem;font-variant-numeric:tabular-nums}

.acom-pie{margin-top:5rem;border-top:1px solid var(--acom-linea);padding-block:2rem 3rem;
  color:var(--acom-tenue);font-size:var(--acom-tm)}
.acom-pie a{color:inherit}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── capa espacial ─────────────────────────────────────────────
   Campo de estrellas y nebulosa hechos con degradados radiales. Van en un
   pseudoelemento fijo detrás de todo, con pointer-events desactivados, así que
   no interceptan ni un clic. */
body{position:relative;background-attachment:fixed}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1.4px 1.4px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 28% 62%, #cfe3ff 50%, transparent 51%),
    radial-gradient(1px 1px   at 44% 31%, #fff 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 61% 78%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px   at 73% 12%, #bcd4ff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 86% 54%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px   at 92% 87%, #dbe8ff 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 6% 74%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px   at 37% 92%, #cfe3ff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 53% 6%, #fff 50%, transparent 51%);
  background-size:420px 420px;
  opacity:.55;
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 45% at 78% 8%,  rgba(77,224,240,.13), transparent 70%),
    radial-gradient(55% 40% at 12% 88%, rgba(150,90,255,.12), transparent 72%);
}

/* Titulares de cartel: versalitas anchas y un halo muy contenido. */
h1,h2,.acom-marca{text-transform:uppercase}
h1{letter-spacing:.055em;text-shadow:0 0 26px rgba(77,224,240,.32)}
h2{letter-spacing:.05em}
.acom-marca{letter-spacing:.13em;text-shadow:0 0 18px rgba(77,224,240,.35)}

/* La cabecera y las separaciones, como una consola. */
.acom-cabecera{
  border-bottom:1px solid var(--acom-acento);
  box-shadow:0 1px 22px rgba(77,224,240,.16);
  backdrop-filter:blur(3px);
}
.acom-lema{letter-spacing:.16em;text-transform:uppercase;font-size:calc(var(--acom-tm) * .88)}
.acom-item{border-bottom-color:var(--acom-linea)}
.acom-fecha{letter-spacing:.14em;text-transform:uppercase;color:var(--acom-acento)}
.acom-prosa blockquote{
  border-left-color:var(--acom-acento);
  box-shadow:-3px 0 18px -6px rgba(77,224,240,.5);
}
.acom-prosa img,.acom-item img{
  border:1px solid var(--acom-linea);
  box-shadow:0 0 34px rgba(77,224,240,.10);
}
a:hover{text-shadow:0 0 14px rgba(77,224,240,.55)}

/* Quien tenga el movimiento reducido no pierde nada: aquí no hay movimiento.
   Pero el halo sí se quita, que a algunas personas les molesta leer con él. */
@media (prefers-reduced-motion:reduce){
  h1,.acom-marca,a:hover{text-shadow:none}
}