/* Variante A · "consola": tipografía con carácter, rótulos como comentarios de código,
   barras segmentadas, grano sutil y pie con el build real. */
@font-face{font-family:"Syne";src:url(fonts/syne.woff) format("woff");font-weight:400 800;font-display:swap}
@font-face{font-family:"Plex Sans";src:url(fonts/plexsans.woff) format("woff");font-weight:100 700;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(fonts/plexmono-400.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(fonts/plexmono-500.woff) format("woff");font-weight:500;font-display:swap}
.v-a{--display:"Syne",system-ui,sans-serif;--body:"Plex Sans",system-ui,sans-serif;--mono:"Plex Mono",ui-monospace,monospace}
body.v-a{font-family:var(--body);font-size:16.5px}
/* grano */
.v-a::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.07;mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.v-a .brand{font-family:var(--mono);letter-spacing:0;text-transform:none;font-size:.85rem}
.v-a .brand .prompt{display:inline;color:var(--a)}
.v-a .brand .bootcmd::after{content:"";display:inline-block;width:.55em;height:1em;margin-left:.2em;vertical-align:-.15em;background:var(--a);animation:caret 1.1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.v-a .brand .bootcmd::after{animation:none}}
.v-a .lang{font-family:var(--mono);border-radius:3px;letter-spacing:0}
/* hero asimétrico: el ojo manda y desborda hacia la izquierda */
@media(min-width:861px){.v-a .hero{grid-template-columns:minmax(320px,560px) minmax(0,1fr);gap:clamp(16px,3vw,48px)}.v-a .stage{margin-left:-3vw}}
.v-a .panel h1{font-family:var(--display);font-weight:800;font-size:clamp(2.1rem,3.7vw,3.7rem);line-height:.95;letter-spacing:-.02em}
.v-a .role{font-family:var(--mono);letter-spacing:0;text-transform:lowercase;font-size:.95rem;color:var(--a3)}
.v-a .role::before{content:"> "}
.v-a .intro{font-size:1.08rem;max-width:38ch}
.v-a .hint{font-family:var(--mono);letter-spacing:0;font-size:.75rem}
.v-a .pill{font-family:var(--mono);border-radius:3px;font-size:.85rem}
.v-a .pill::before{content:"./"; opacity:.6}
/* rótulos como comentarios */
.v-a h2{font-family:var(--mono);font-weight:500;letter-spacing:0;text-transform:lowercase;font-size:.95rem}
.v-a h2::before{content:"// ";opacity:.55}
.v-a .detail{border-radius:0;border-left-width:2px;background:linear-gradient(90deg,var(--panel),transparent 85%)}
.v-a .detail h2{font-family:var(--display);font-weight:700;font-size:1.9rem;text-transform:none;color:var(--bone)}
.v-a .detail h2::before{content:none}
.v-a .sum{font-size:1.05rem}
.v-a .period,.v-a .rt{font-family:var(--mono);font-size:.8rem}
.v-a .sub h3,.v-a .certs h3{font-family:var(--mono);font-weight:500;letter-spacing:0;text-transform:lowercase;font-size:.85rem}
.v-a .sub h3::before,.v-a .certs h3::before{content:"## ";opacity:.55}
.v-a .badge{font-family:var(--mono);border-radius:0}
/* barras segmentadas */
.v-a .sh{font-size:.92rem}
.v-a .sh b{font-family:var(--mono);font-size:.8rem}
.v-a .bar{height:9px;border-radius:0;background:var(--track);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 7px,transparent 7px 9px);mask:repeating-linear-gradient(90deg,#000 0 7px,transparent 7px 9px)}
.v-a .bar i{background:var(--a)}
.v-a .tools li{font-family:var(--mono);border-radius:3px;font-size:.78rem}
.v-a .build-text{font-size:1rem}
.v-a .mail{font-family:var(--mono);font-size:1.05rem}
.v-a footer{font-family:var(--mono);font-size:.72rem;color:var(--mut)}

/* segunda línea de consola: echo con cartel de bienvenida */
.v-a .echo{display:block;margin:14px 0 6px;font-family:var(--mono)}
.v-a .cmdline{font-size:.85rem;color:var(--bone);opacity:.9}
.v-a .cmdline .prompt{color:var(--a)}
.v-a .banner{margin:10px 0 2px;color:var(--a3)}
.v-a .banner svg{display:block;width:min(100%,calc(var(--cols) * 6.6px));height:auto;fill:currentColor;filter:blur(.35px) drop-shadow(0 0 3px color-mix(in srgb,var(--a3) 70%,transparent)) drop-shadow(0 0 10px color-mix(in srgb,var(--a3) 40%,transparent))}
.v-a .cmdline{overflow-wrap:anywhere}
.v-a .banner[data-lang]{display:none}
html[lang="es"] .v-a .banner[data-lang="es"],html[lang="en"] .v-a .banner[data-lang="en"]{display:block}


/* --- Arranque: se escribe ./AlexDBdevopsCV.sh y el CV se va generando --- */
.v-a .brand .bootcmd{display:inline;color:var(--bone)}
.v-a .brand .bootlog{display:inline;color:var(--mut);margin-left:1.2em}
.v-a .brand .bootlog:empty{display:none}
html.boot .v-a .bt{opacity:0;transform:translateY(10px);animation:boot-failsafe 0s 7s forwards}
html.boot .v-a .bt.in{opacity:1;transform:none;animation:none;transition:opacity .45s ease,transform .45s ease}
html.boot .v-a .stage.bt{transform:scale(.96)}
html.boot .v-a .stage.bt.in{transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
html.boot .v-a .stage.bt.in #eyeball{animation:eye-open .9s .15s both}
/* botón Enter: invita a ejecutar; si no se pulsa, arranca solo */
.v-a .bootenter{margin-left:1em;font:500 .8rem var(--mono);color:#000;background:var(--a);border:0;border-radius:3px;padding:3px 10px;cursor:pointer;animation:pulse 1.2s ease-in-out infinite}
.v-a .bootenter:focus-visible{outline:2px solid var(--a2);outline-offset:2px}
@keyframes pulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--a) 25%,transparent)}}
/* con "reducir movimiento": misma secuencia, solo fundidos */
@media(prefers-reduced-motion:reduce){html.boot .v-a .bt{transform:none}html.boot .v-a .stage.bt.in #eyeball{animation:none}.v-a .bootenter{animation:none}}
@keyframes eye-open{0%{transform:scaleY(.04)}60%{transform:scaleY(1.05)}100%{transform:scaleY(1)}}
@keyframes boot-failsafe{to{opacity:1;transform:none}}

/* contacto como salida de consola */
.v-a .contact-list{border:1px solid var(--line);border-left:2px solid var(--a);background:linear-gradient(90deg,var(--panel),transparent 90%);padding:18px 22px;max-width:720px;gap:14px}
.v-a .contact-list li{display:grid;grid-template-columns:7.5em minmax(0,1fr) auto;gap:16px;align-items:center}
.v-a .contact-list .ck{display:block;font-family:var(--mono);font-size:.82rem;color:var(--a)}
.v-a .contact-list .ck::before{content:"$ ";color:var(--mut)}
.v-a .contact-list a{font-family:var(--mono);font-size:1rem;border-bottom:1px solid transparent;padding-bottom:1px;transition:border-color .2s,color .2s}
.v-a .contact-list a:hover,.v-a .contact-list a:focus-visible{color:var(--a);border-bottom-color:var(--a)}
.v-a .contact-list .ico{color:var(--a3)}
.v-a .contact-list .arr{color:var(--mut)}
.v-a .copy{font-family:var(--mono)}
@media(max-width:560px){.v-a .contact-list{padding:14px 14px}.v-a .contact-list li{grid-template-columns:1fr auto;gap:6px 10px}.v-a .contact-list .ck{grid-column:1/-1}.v-a .contact-list a{font-size:.8rem}}

.v-a .grid.skill-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 32px;align-items:start}
.v-a .scol{display:grid;gap:14px}