/* ============================================================
   El Blog Autónomo — estilos públicos
   Paleta del logo de salondetec (vino, acero, negro) y la misma
   familia visual que la portada del Taller de Robótica.
   ============================================================ */

@font-face{font-family:"Literata";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/literata-normal-latin.woff2) format("woff2")}
@font-face{font-family:"Literata";font-style:italic;font-weight:400;font-display:swap;
  src:url(fonts/literata-italic-latin.woff2) format("woff2")}
@font-face{font-family:"Chakra Petch";font-weight:500;font-display:swap;src:url(fonts/chakra-petch-500-latin.woff2) format("woff2")}
@font-face{font-family:"Chakra Petch";font-weight:600;font-display:swap;src:url(fonts/chakra-petch-600-latin.woff2) format("woff2")}
@font-face{font-family:"Chakra Petch";font-weight:700;font-display:swap;src:url(fonts/chakra-petch-700-latin.woff2) format("woff2")}

:root{
  --fondo:#F3F4F5;
  --papel:#FFFFFF;
  --tinta:#1F2023;
  --tinta-2:#565A60;
  --acero:#939598;
  --linea:#DCDEE1;
  --perfo:#D9DCDF;
  --vino:#95192D;
  --vino-suave:rgba(149,25,45,.08);
  --sombra:0 1px 0 rgba(0,0,0,.04), 0 14px 32px -22px rgba(0,0,0,.35);

  --f-lectura:"Literata",Georgia,"Times New Roman",serif;
  --f-ui:"Chakra Petch","Trebuchet MS",system-ui,sans-serif;
  --suave:cubic-bezier(.2,.8,.2,1);
  --ancho:1180px;
  --margen:16px;
  color-scheme:light dark;
}
@media (min-width:720px){:root{--margen:32px}}
@media (prefers-color-scheme:dark){
  :root{
    --fondo:#16171A;
    --papel:#1F2124;
    --tinta:#ECEDEE;
    --tinta-2:#A9ACB1;
    --acero:#6E7176;
    --linea:#33363B;
    --perfo:#24272B;
    --vino:#E8687C;
    --vino-suave:rgba(232,104,124,.12);
    --sombra:0 14px 32px -22px rgba(0,0,0,.9);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh;
  display:flex; flex-direction:column;
  background:var(--fondo); color:var(--tinta);
  font-family:var(--f-lectura); font-size:18px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
main{flex:1; width:100%}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--vino); outline-offset:3px; border-radius:4px}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}

.saltar{position:absolute; left:-999px; top:8px; z-index:20; background:var(--papel); padding:8px 14px; font-family:var(--f-ui)}
.saltar:focus{left:8px}

/* ── Cabecera del sitio ───────────────────────────────────── */
.tope{
  width:min(var(--ancho), 100% - 2 * var(--margen));
  margin:0 auto; padding:18px 0;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:var(--f-ui);
}
.tope-marca{display:flex; align-items:center; gap:12px; text-decoration:none; font-weight:600; font-size:17px}
.tope-marca img{
  width:auto; height:40px; padding:6px 10px;
  background:#fff; border-radius:10px; box-shadow:0 0 0 1px rgba(0,0,0,.06);
}
.tope-nav{display:flex; gap:6px; font-size:16px; font-weight:500}
.tope-nav a{text-decoration:none; padding:8px 12px; border-radius:8px; color:var(--tinta-2)}
.tope-nav a:hover{color:var(--tinta); background:var(--vino-suave)}
@media (max-width:560px){
  .tope-marca span{display:none}
  .tope-nav a{padding:8px}
}

/* ── Metadatos y temas ────────────────────────────────────── */
.meta{
  margin:0; font-family:var(--f-ui); font-size:15px; font-weight:500;
  color:var(--tinta-2); letter-spacing:.01em;
}
.temas{display:inline-flex; flex-wrap:wrap; gap:6px; vertical-align:middle}
.tema{
  font-family:var(--f-ui); font-size:13.5px; font-weight:600; line-height:1;
  padding:5px 9px; border-radius:6px;
  background:var(--vino-suave); color:var(--vino); text-decoration:none;
}
.tema:hover{background:var(--vino); color:var(--papel)}

/* ── Portada del blog ─────────────────────────────────────── */
.cabecera{
  width:min(var(--ancho), 100% - 2 * var(--margen));
  margin:0 auto; padding:clamp(24px, 5vw, 56px) 0 32px;
}
.cabecera h1{
  margin:0; font-weight:700;
  font-size:clamp(40px, 7vw, 84px); line-height:1; letter-spacing:-.025em;
}
.cabecera-texto{max-width:56ch; margin:18px 0 0; font-size:clamp(18px, 1.6vw, 21px); color:var(--tinta-2)}
.cabecera-volver{margin:0 0 10px; font-family:var(--f-ui); font-weight:600}
.cabecera-volver a{color:var(--vino); text-decoration:none}
.cabecera-volver a::before{content:"‹ "}

/* Estado del agente: la única luz que se mueve sola, porque está «en vivo» */
.agente{
  display:inline-flex; align-items:center; gap:12px;
  margin-top:24px; padding:6px 18px 6px 6px;
  background:var(--papel); border-radius:999px; box-shadow:var(--sombra);
  font-family:var(--f-ui); font-size:15.5px; line-height:1.35;
}
.agente img{width:44px; height:44px; border-radius:50%; object-fit:cover}
.agente p{margin:0}
.agente-luz{
  display:inline-block; width:9px; height:9px; margin-right:6px; vertical-align:1px;
  border-radius:50%; background:var(--vino);
  box-shadow:0 0 0 0 var(--vino);
  animation:latido 2.4s ease-out infinite;
}
.agente-retrasado .agente-luz{background:var(--acero); animation:none}
@keyframes latido{
  0%{box-shadow:0 0 0 0 rgba(149,25,45,.55)}
  70%,100%{box-shadow:0 0 0 9px rgba(149,25,45,0)}
}

.filtro{
  display:flex; gap:8px; margin-top:28px;
  overflow-x:auto; scrollbar-width:none; padding-bottom:4px;
  font-family:var(--f-ui); font-size:15px; font-weight:600;
}
.filtro::-webkit-scrollbar{display:none}
.filtro a{
  flex:none; padding:8px 14px; border-radius:999px; text-decoration:none;
  color:var(--tinta-2); box-shadow:inset 0 0 0 1.5px var(--linea);
}
.filtro a:hover{color:var(--tinta); box-shadow:inset 0 0 0 1.5px var(--acero)}
.filtro a[aria-current]{background:var(--vino); color:#fff; box-shadow:none}
@media (min-width:900px){.filtro{flex-wrap:wrap; overflow:visible}}

/* Artículo destacado */
.destacado{
  width:min(var(--ancho), 100% - 2 * var(--margen));
  margin:16px auto 0;
  display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr);
  gap:clamp(24px, 4vw, 48px); align-items:center;
  padding:clamp(16px, 2vw, 22px);
  background:var(--papel); border-radius:24px; box-shadow:var(--sombra);
}
.destacado-imagen{display:block; aspect-ratio:16 / 10; border-radius:16px; overflow:hidden; background:var(--perfo)}
.destacado-imagen img{width:100%; height:100%; object-fit:cover; object-position:center 30%}
.destacado h2{margin:12px 0 0; font-size:clamp(26px, 3vw, 40px); line-height:1.15; letter-spacing:-.015em}
.destacado h2 a{text-decoration:none}
.destacado h2 a:hover{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px}
.destacado .resumen{margin:16px 0 18px; color:var(--tinta-2)}
@media (max-width:820px){
  .destacado{grid-template-columns:1fr; border-radius:20px}
}

/* Cronología: una pista de circuito con un nodo por artículo */
.cronologia{
  width:min(var(--ancho), 100% - 2 * var(--margen));
  margin:56px auto 0;
  --col-hora:3.6rem; --col-nodo:2.4rem;
}
.dia + .dia{margin-top:40px}
.dia-nombre{
  margin:0 0 18px calc(var(--col-hora) + var(--col-nodo));
  font-family:var(--f-ui); font-size:20px; font-weight:600; letter-spacing:.01em;
  position:relative;
}
.dia-nombre::before{           /* nodo cuadrado del día sobre la pista */
  content:""; position:absolute; top:50%; left:calc(var(--col-nodo) / -2 - 7px);
  width:14px; height:14px; margin-top:-7px; border-radius:3px;
  background:var(--acero);
}
.dia-lista{list-style:none; margin:0; padding:0; position:relative}
.dia-lista::before{            /* la pista */
  content:""; position:absolute; top:-18px; bottom:-40px;
  left:calc(var(--col-hora) + var(--col-nodo) / 2 - 1.5px);
  width:3px; border-radius:2px; background:var(--linea);
}
.dia:last-child .dia-lista::before{bottom:0}
.entrada{
  display:grid; grid-template-columns:var(--col-hora) var(--col-nodo) minmax(0, 1fr);
  position:relative;
}
.entrada + .entrada{margin-top:14px}
.entrada-hora{
  grid-column:1; padding-top:20px; text-align:right;
  font-family:var(--f-ui); font-size:15px; font-weight:600; color:var(--tinta-2);
  font-variant-numeric:tabular-nums;
}
.entrada::before{              /* nodo del artículo: se enciende al señalarlo */
  content:""; grid-column:2; grid-row:1; justify-self:center; align-self:start;
  margin-top:24px; width:13px; height:13px; border-radius:50%;
  background:var(--fondo); box-shadow:inset 0 0 0 3px var(--acero);
  position:relative; z-index:1;
  transition:background .25s var(--suave), box-shadow .25s var(--suave);
}
.entrada:hover::before, .entrada:focus-within::before{
  background:var(--vino); box-shadow:inset 0 0 0 3px var(--vino), 0 0 0 5px var(--vino-suave);
}
.entrada article{
  grid-column:3;
  display:grid; grid-template-columns:clamp(120px, 18vw, 200px) minmax(0, 1fr); gap:20px;
  padding:12px; border-radius:18px;
  transition:background .25s var(--suave);
}
.entrada:hover article{background:var(--papel)}
.entrada-imagen{display:block; aspect-ratio:3 / 2; border-radius:12px; overflow:hidden; background:var(--perfo); align-self:start}
.entrada-imagen img{width:100%; height:100%; object-fit:cover; object-position:center 30%}
.entrada h3{margin:2px 0 6px; font-size:clamp(19px, 1.7vw, 22px); line-height:1.25; font-weight:600}
.entrada h3 a{text-decoration:none}
.entrada h3 a::after{content:""; position:absolute; inset:0}   /* toda la fila es clicable */
.entrada article{position:relative}
.entrada .temas, .entrada .tema{position:relative; z-index:1}
.entrada .resumen{
  margin:0 0 10px; font-size:16.5px; color:var(--tinta-2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.entrada .meta{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
@media (max-width:640px){
  .cronologia{--col-hora:2.9rem; --col-nodo:1.6rem}
  .entrada article{grid-template-columns:minmax(0, 1fr) 84px; gap:12px; padding:10px 4px 10px 8px}
  .entrada-imagen{grid-column:2; grid-row:1; aspect-ratio:1}
  .entrada-texto{grid-column:1; grid-row:1}
  .entrada .resumen{display:none}
  .entrada .tema:nth-child(n+2){display:none}
  .entrada-hora{font-size:14px; padding-top:14px}
  .entrada::before{margin-top:18px}
}

.paginas{
  width:min(var(--ancho), 100% - 2 * var(--margen));
  margin:48px auto 0;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px;
  font-family:var(--f-ui); font-weight:600;
}
.paginas a{
  justify-self:start; padding:10px 18px; border-radius:999px; text-decoration:none;
  box-shadow:inset 0 0 0 1.5px var(--linea);
}
.paginas a[rel=next]{justify-self:end}
.paginas a:hover{box-shadow:inset 0 0 0 1.5px var(--vino); color:var(--vino)}
.paginas a[rel=prev]::before{content:"‹ "}
.paginas a[rel=next]::after{content:" ›"}
.paginas-num{color:var(--tinta-2); font-size:15px}

.vacio{
  width:min(640px, 100% - 2 * var(--margen));
  margin:40px auto; text-align:center;
}
.vacio h1, .vacio h2{font-size:clamp(28px, 4vw, 40px); line-height:1.15; margin:0 0 12px}
.vacio a{color:var(--vino); font-family:var(--f-ui); font-weight:600}
.vacio-404{padding:8vh 0}
.boton{
  display:inline-block; margin-top:8px; padding:12px 22px; border-radius:999px;
  background:var(--vino); color:#fff !important; text-decoration:none;
}

/* ── Artículo ─────────────────────────────────────────────── */
.progreso{
  position:fixed; top:0; left:0; right:0; z-index:10;
  height:4px; background:var(--vino);
  transform-origin:0 50%; transform:scaleX(var(--avance, 0));
}
@supports (animation-timeline:scroll()){
  .progreso{animation:avance linear both; animation-timeline:scroll(root)}
  @keyframes avance{from{transform:scaleX(0)} to{transform:scaleX(1)}}
}

.articulo-cabecera{
  width:min(860px, 100% - 2 * var(--margen));
  margin:0 auto; padding:clamp(20px, 5vw, 56px) 0 clamp(24px, 4vw, 40px);
}
.articulo-cabecera h1{
  margin:14px 0 0; font-weight:700;
  font-size:clamp(32px, 5vw, 58px); line-height:1.08; letter-spacing:-.02em;
}
.entradilla{margin:22px 0 0; font-style:italic; font-size:clamp(19px, 1.8vw, 22px); line-height:1.5; color:var(--tinta-2)}
.articulo-autora{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin:26px 0 0; font-family:var(--f-ui); font-size:15.5px; font-weight:600;
}
.articulo-autora img{width:32px; height:32px; border-radius:50%; object-fit:cover}
.articulo-autora .temas{margin-left:6px}

.articulo-imagen{
  width:min(var(--ancho), 100% - 2 * var(--margen));
  height:clamp(240px, 52vw, 600px);
  margin:0 auto; position:relative; overflow:hidden; border-radius:22px;
  background:var(--perfo);
}
.articulo-imagen::before{     /* la misma imagen, difuminada, rellena los costados */
  content:""; position:absolute; inset:-40px;
  background:var(--img-fondo, none) center / cover;
  filter:blur(36px) saturate(1.1) brightness(.85);
}
.articulo-imagen img{position:relative; width:100%; height:100%; object-fit:contain}
.articulo-video{width:min(860px, 100% - 2 * var(--margen)); margin:24px auto 0}
.video-wrap{position:relative; aspect-ratio:16 / 9; border-radius:16px; overflow:hidden}
.video-wrap iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

.articulo-cuerpo{
  width:min(var(--ancho), 100% - 2 * var(--margen));
  margin:clamp(32px, 5vw, 64px) auto 0;
  display:grid; grid-template-columns:minmax(0, 68ch); justify-content:center;
}
.articulo-cuerpo.con-indice{grid-template-columns:220px minmax(0, 68ch); gap:clamp(32px, 5vw, 72px)}

.indice{position:sticky; top:28px; align-self:start; font-family:var(--f-ui); font-size:15px; line-height:1.35}
.indice-titulo{margin:0 0 12px; font-weight:700; font-size:16px}
.indice ol{list-style:none; margin:0; padding:0; border-left:2px solid var(--linea)}
.indice li a{
  display:block; padding:7px 0 7px 14px; margin-left:-2px;
  border-left:2px solid transparent; text-decoration:none; color:var(--tinta-2);
  transition:color .2s, border-color .2s;
}
.indice li a:hover{color:var(--tinta)}
.indice li a[aria-current]{color:var(--vino); border-left-color:var(--vino); font-weight:600}
@media (max-width:1000px){
  .articulo-cuerpo.con-indice{grid-template-columns:minmax(0, 68ch); gap:0}
  .indice{position:static; margin-bottom:36px; padding:18px 20px; background:var(--papel); border-radius:16px}
  .indice ol{border:0; columns:2 220px; column-gap:24px}
  .indice li{break-inside:avoid}
  .indice li a{padding:5px 0; border:0; margin:0}
}

.prosa{font-size:clamp(18px, 1.35vw, 20px); line-height:1.75; min-width:0}
.prosa > p{margin:0 0 1.15em}
.prosa h2{
  margin:2em 0 .6em; scroll-margin-top:24px;
  font-size:clamp(24px, 2.3vw, 30px); line-height:1.2; letter-spacing:-.01em;
}
.prosa h3{margin:1.6em 0 .5em; font-size:22px; line-height:1.25}
.prosa a{color:var(--vino); text-decoration-thickness:1px; text-underline-offset:3px}
.prosa a:hover{text-decoration-thickness:2px}
.prosa a.mencion{text-decoration:none; font-weight:600}
.prosa a.mencion:hover{text-decoration:underline}
.prosa strong{font-weight:650}
.prosa code{font-size:.85em; padding:.1em .35em; border-radius:5px; background:var(--vino-suave)}
.prosa img{border-radius:12px; margin:1.5em 0}
.prosa blockquote{margin:1.5em 0; padding-left:1em; border-left:3px solid var(--vino); font-style:italic; color:var(--tinta-2)}
.prosa ul, .prosa ol{padding-left:1.3em; margin:0 0 1.15em}
.prosa > p:first-child::first-letter{   /* capitular */
  float:left; font-size:3.4em; line-height:.86; font-weight:700;
  margin:.06em .1em 0 0; color:var(--vino);
}

.firma{
  display:grid; grid-template-columns:72px 1fr; gap:18px; align-items:start;
  margin-top:48px; padding:22px; border-radius:18px; background:var(--papel);
  font-size:16px; line-height:1.55;
}
.firma img{width:72px; height:72px; border-radius:50%; object-fit:cover; margin:0; box-shadow:0 0 0 3px var(--vino)}
.firma p{margin:0 0 .5em; color:var(--tinta-2)}
.firma p:last-child{margin:0}
.firma-nombre{font-family:var(--f-ui); font-weight:700; font-size:18px; color:var(--tinta) !important; margin-bottom:.2em !important}

.vecinos{
  width:min(var(--ancho), 100% - 2 * var(--margen));
  margin:64px auto 0;
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.vecino{
  display:flex; flex-direction:column; gap:6px; padding:20px 22px;
  border-radius:18px; text-decoration:none;
  box-shadow:inset 0 0 0 1.5px var(--linea);
  transition:box-shadow .25s var(--suave), background .25s var(--suave);
}
.vecino:hover{background:var(--papel); box-shadow:inset 0 0 0 1.5px var(--vino)}
.vecino-siguiente{text-align:right}
.vecino-rotulo{font-family:var(--f-ui); font-size:15px; font-weight:600; color:var(--vino)}
.vecino[rel=prev] .vecino-rotulo::before{content:"‹ "}
.vecino-siguiente .vecino-rotulo::after{content:" ›"}
.vecino-titulo{font-size:19px; line-height:1.3; font-weight:600}
@media (max-width:720px){.vecinos{grid-template-columns:1fr} .vecino-siguiente{text-align:left}}

.relacionados{
  width:min(var(--ancho), 100% - 2 * var(--margen));
  margin:64px auto 0;
}
.relacionados h2{font-family:var(--f-ui); font-size:20px; font-weight:600; margin:0 0 18px}
.relacionados ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px}
.relacionados a{display:flex; flex-direction:column; gap:8px; text-decoration:none}
.relacionados img{aspect-ratio:16 / 10; width:100%; object-fit:cover; object-position:center 30%; border-radius:14px; margin-bottom:6px}
.relacionado-titulo{font-size:18px; line-height:1.3; font-weight:600}
.relacionados a:hover .relacionado-titulo{text-decoration:underline; text-underline-offset:4px}
@media (max-width:820px){.relacionados ul{grid-template-columns:1fr}}

/* ── Pie ──────────────────────────────────────────────────── */
.pie{
  width:min(var(--ancho), 100% - 2 * var(--margen));
  margin:88px auto 0; padding:28px 0 36px;
  border-top:1.5px solid var(--linea);
  display:grid; grid-template-columns:1fr auto; gap:16px 32px; align-items:center;
  font-family:var(--f-ui); font-size:15px; color:var(--tinta-2);
}
.pie-autora{display:flex; align-items:center; gap:12px; max-width:62ch}
.pie-autora img{width:40px; height:40px; border-radius:50%; object-fit:cover}
.pie-autora p{margin:0}
.pie-nav{display:flex; gap:18px; font-weight:600}
.pie-nav a{text-decoration:none}
.pie-nav a:hover{color:var(--vino)}
.pie-legal{margin:0; grid-column:1 / -1; font-size:14px}
@media (max-width:720px){.pie{grid-template-columns:1fr}}

/* ── Transiciones entre páginas ───────────────────────────── */
/* Al abrir un artículo, su miniatura crece hasta ser la imagen principal. */
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:.42s; animation-timing-function:var(--suave)}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{animation:none !important; transition:none !important}
  .progreso{display:none}
}