/* ============================================================
   cautivoydesarmado.es — hoja de estilos
   Orden: variables, base, fondo, cabecera, listado, etiqueta,
   parpadeo, pie y, al final, los ajustes de móvil.
   ============================================================ */

:root{
  --negro:#000;
  --gris:rgb(132 137 142);
  --blanco:#fff;
  --rojo:#f00007;
  --amarillo:#ffc700;
  --azul:#40aaff;
  --verde:#00c853;
  --oro:rgba(168,145,65,.3);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--negro);
  color:var(--gris);
  font-family:"Azeret Mono",ui-monospace,Menlo,monospace;
  font-size:4.513888vw;
  line-height:4.36vw;
  text-transform:uppercase;
  letter-spacing:-.05vw;
  -webkit-font-smoothing:antialiased;
  cursor:default;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}

/* ---------- fondo animado ---------- */
#fondo{
  position:fixed;inset:0;z-index:-1;
  width:100%;height:100%;
  display:block;pointer-events:none;
  background:var(--negro);
}

/* ---------- cabecera fija ---------- */
header{
  position:fixed;top:.694444vw;right:.694444vw;z-index:10;
  display:flex;align-items:center;gap:.972222vw;
}
header a:hover{color:var(--blanco)}
header .logo{
  display:flex;align-items:center;justify-content:center;
  width:4.513888vw;aspect-ratio:1;
  padding:.694444vw .833333vw;
  background:var(--amarillo);
  transition:background-color .12s;
}
header .logo:hover{background:transparent}
header .logo img{width:100%;height:100%;object-fit:contain}

/* ---------- listado ---------- */
main{width:100vw;max-width:100vw;padding-left:.694444vw}
main section{
  border-left:.208333vw solid var(--oro);
  padding:0 1.776666vw 0 .694444vw;
}
main section.proyectos-anteriores{padding-top:.98vw}
main section.proyecto-nuevo{border-color:var(--oro)}
main section.proyecto-nuevo .fila{color:var(--verde)}
main section.enlaces{
  border-image:linear-gradient(180deg,var(--rojo) 0,var(--negro)) 1;
  padding-bottom:.98vw;
}
main section.enlaces .fila{color:var(--amarillo)}

.fila{display:flex;flex-wrap:nowrap;position:relative;white-space:nowrap}
.fila.pendiente{color:var(--rojo)}
.fila .izq{
  flex-shrink:0;width:4ch;
  font-size:1.805555vw;line-height:1.94444vw;letter-spacing:0;
  position:relative;
}
.fila .der{
  flex-grow:1;width:33ch;overflow:hidden;position:relative;white-space:nowrap;
}
.fila .der span{display:inline-flex}
.fila .der a{display:flex}
.fila .der a:hover{color:var(--blanco)}
.fila .der a:not(.ultimo):hover::after{content:"↗"}

/* Títulos largos: banner horizontal continuo. Avanza liso, sin saltos,
   a un paso que se puede leer. La velocidad se fija en lista.js. */
.marquesina{
  display:inline-block;
  will-change:transform;
  animation:marquesina var(--duracion,0s) linear infinite;
}
@keyframes marquesina{
  from{transform:translateX(0)}
  to{transform:translateX(calc(var(--recorrido,0px)*-1))}
}

/* etiqueta amarilla que sigue al cursor sobre cualquier proyecto.
   Entra con un barrido de tramado, a saltos, como una transición vieja. */
#etiqueta{
  display:none;position:fixed;left:0;top:0;z-index:9999;pointer-events:none;
  background:var(--negro);color:var(--amarillo);
  font-size:1.805555vw;line-height:1.94444vw;
  padding:.14vw .35vw .07vw;
  white-space:nowrap;
  transform:translateY(-150%);
}
#etiqueta.visible{display:block;animation:revelar .34s steps(9) both}
@keyframes revelar{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* la banda de cuadros grises que barre por delante del texto */
#etiqueta.visible::after{
  content:"";position:absolute;top:-.28vw;bottom:-.28vw;width:1.7em;
  pointer-events:none;
  background-image:
    linear-gradient(45deg,#c9c9c9 25%,transparent 25%,transparent 75%,#c9c9c9 75%),
    linear-gradient(45deg,#c9c9c9 25%,transparent 25%,transparent 75%,#c9c9c9 75%);
  background-position:0 0,.208333vw .208333vw;
  background-size:.416666vw .416666vw;
  animation:barrido .34s steps(9) both;
}
@keyframes barrido{
  from{left:-1.7em;opacity:1}
  85%{opacity:1}
  to{left:100%;opacity:0}
}

/* tres parpadeos al llegar al último proyecto */
.fila.parpadeo{animation:parpadeo .5s steps(2,jump-none) 3}
@keyframes parpadeo{from{opacity:1}to{opacity:0}}

/* pie sólo en móvil */
footer{
  display:none;position:fixed;right:1.6vw;bottom:1.333333vw;z-index:10;color:var(--blanco);
}

/* ---------- móvil ---------- */
@media (max-width:500px){
  body{font-size:7.733333vw;line-height:7.47vw;letter-spacing:-.232vw}
  main{padding-left:0}
  main section{border-left-width:.8vw;padding:0 1.116vw 0 1.6vw}
  .fila .izq{font-size:4vw;line-height:3.733333vw;width:4ch}
  .fila .der{max-width:19ch;width:100%}
  header{top:2.133333vw;right:2.133333vw}
  header .tienda{display:none}
  header .logo{width:16vw;height:16vw;padding:2.666666vw 3.2vw}
  #etiqueta{display:none!important}
  footer{display:flex;align-items:center}
}