/*
Theme Name: Hokusai
Description: Tema del medio de tecnología Hokusai. Identidad inspirada en «La gran ola de Kanagawa».
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: hokusai
*/

/* Paleta: azul de Prusia (el pigmento de la estampa), añil profundo, espuma, papel washi y tinta. */
:root{
  --prusia:#16365A;
  --ola:#2F6496;
  --anil:#0E2238;
  --espuma:#F4F0E6;
  --papel:#FBF9F4;
  --tinta:#15191F;
  --gris:#5F6670;
  --linea:#DCD6C9;
  --sello:#B5322A;
  --display:"Shippori Mincho B1","Hiragino Mincho ProN","Times New Roman",serif;
  --texto:"IBM Plex Sans","Segoe UI",Roboto,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --ancho:1200px;
  --lectura:42rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--texto);font-size:17px;line-height:1.6}
a{color:var(--prusia);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ola)}
img{max-width:100%;height:auto}
.envoltorio{max-width:var(--ancho);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--ola);outline-offset:2px}

/* Cabecera */
.cabecera{background:var(--prusia);color:var(--espuma)}
.cabecera .envoltorio{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:18px 10px;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:14px;color:var(--espuma);text-decoration:none}
.marca img{width:52px;height:52px;border-radius:6px;box-shadow:0 0 0 2px var(--espuma)}
.marca .nombre{font-family:var(--display);font-weight:800;font-size:clamp(28px,4.5vw,40px);letter-spacing:.14em;line-height:1}
.marca .lema{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#B9CBE0;margin-top:6px}
.fecha{font-family:var(--mono);font-size:12px;color:#B9CBE0}
.ola-banda{height:22px;background:url("assets/ola.svg") repeat-x;background-size:160px 22px;background-color:var(--papel)}
.menu{border-bottom:1px solid var(--linea);background:var(--papel)}
.menu ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;overflow-x:auto}
.menu a{display:block;padding:12px 12px;font-weight:600;font-size:14px;text-decoration:none;color:var(--tinta);white-space:nowrap;border-bottom:3px solid transparent}
.menu a:hover,.menu .current-menu-item a,.menu .current-cat a{border-bottom-color:var(--prusia);color:var(--prusia)}

/* Portada */
.portada{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:32px;padding-block:32px}
.principal .categoria,.tarjeta .categoria,.articulo .categoria{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--ola)}
.principal h2{font-family:var(--display);font-size:clamp(30px,4.6vw,52px);line-height:1.08;margin:.3em 0 .35em;text-wrap:balance}
.principal h2 a,.tarjeta h3 a,.lista h3 a{color:var(--tinta);text-decoration:none}
.principal h2 a:hover,.tarjeta h3 a:hover,.lista h3 a:hover{color:var(--prusia)}
.principal p{font-size:19px;color:#2C333C;max-width:var(--lectura)}
.ilustracion{aspect-ratio:2/1;max-width:100%;margin:22px 0 4px;background:var(--espuma) url("assets/gran-ola.svg") no-repeat center bottom/cover;border-bottom:4px solid var(--prusia)}
.principal .ilustracion,.principal figure{margin-top:22px}
.principal figure{margin-inline:0}
.meta{font-family:var(--mono);font-size:12px;color:var(--gris)}
.lateral h2.titulo-seccion,.titulo-seccion{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);border-top:3px solid var(--prusia);padding-top:10px;margin:0 0 12px}
.lista{list-style:none;margin:0;padding:0;counter-reset:n}
.lista li{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:12px 0;border-bottom:1px solid var(--linea);counter-increment:n}
.lista li::before{content:counter(n);font-family:var(--display);font-size:28px;line-height:1;color:var(--ola)}
.lista h3{font-family:var(--display);font-size:18px;line-height:1.25;margin:0 0 4px}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:28px;padding-block:8px 40px}
.tarjeta{border-top:1px solid var(--linea);padding-top:14px}
.tarjeta h3{font-family:var(--display);font-size:22px;line-height:1.2;margin:.35em 0 .4em;text-wrap:balance}
.tarjeta p{margin:0;color:#3A414A;font-size:15px}
.tarjeta .fuentes-n{display:inline-block;margin-top:10px}

/* Artículo */
.articulo{max-width:var(--lectura);margin:0 auto;padding-block:36px 48px}
.articulo h1{font-family:var(--display);font-size:clamp(32px,5vw,50px);line-height:1.08;margin:.3em 0 .4em;text-wrap:balance}
.articulo .entradilla{font-size:21px;line-height:1.45;color:#2C333C;margin:0 0 18px}
.articulo .contenido{font-size:18px}
.articulo .ilustracion{aspect-ratio:3/1;margin:20px 0 26px}
.articulo .contenido p{margin:0 0 1.1em}
.articulo .contenido h2{font-family:var(--display);font-size:26px;margin:1.6em 0 .5em}
.articulo .contenido > p:first-of-type::first-letter{font-family:var(--display);float:left;font-size:3.3em;line-height:.9;padding:.06em .1em 0 0;color:var(--prusia)}
.articulo .contenido a{background:linear-gradient(transparent 62%,#D7E3F0 62%);text-decoration:none;color:var(--tinta)}

/* Imagen oficial con crédito */
figure.imagen{margin:22px 0 26px}
figure.imagen img{display:block;width:100%;border-bottom:4px solid var(--prusia)}
figure.imagen figcaption{font-family:var(--mono);font-size:12px;color:var(--gris);margin-top:8px}
figure.imagen figcaption a{color:var(--gris)}

/* Bloque de fuentes que añade el bot */
.articulo .contenido h2:has(+ ul.fuentes){font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);border-top:3px solid var(--prusia);padding-top:10px;margin-top:2.4em}
ul.fuentes{list-style:none;margin:0 0 1.4em;padding:0;border:1px solid var(--linea);background:#fff}
ul.fuentes li{padding:10px 14px;border-top:1px solid var(--linea);font-size:15px}
ul.fuentes li:first-child{border-top:0}
ul.fuentes a{font-weight:700;background:none;color:var(--prusia);text-decoration:underline}
.aviso-automatizado{font-family:var(--mono);font-size:12px;color:var(--gris);display:flex;gap:10px;align-items:center}
.aviso-automatizado::before{content:"";flex:0 0 14px;height:14px;background:var(--sello);border-radius:2px}

/* Archivo */
.cabecera-archivo{padding-block:30px 6px}
.cabecera-archivo h1{font-family:var(--display);font-size:clamp(30px,4vw,44px);margin:0}
.paginacion{display:flex;gap:12px;padding-block:0 48px;font-family:var(--mono);font-size:14px}

/* Pie */
.pie{background:var(--anil);color:#C9D5E3;margin-top:24px}
.pie .ola-banda{background-color:var(--papel);transform:scaleY(-1)}
.pie .envoltorio{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-block:28px;font-size:14px}
.pie a{color:var(--espuma)}

@media (max-width:820px){
  .portada{grid-template-columns:1fr}
  body{font-size:16px}
  .articulo .contenido{font-size:17px}
}
@media (prefers-reduced-motion:no-preference){
  .ola-banda{animation:mar 40s linear infinite}
  @keyframes mar{from{background-position-x:0}to{background-position-x:-160px}}
}