/* =====================================================================
   f5node.es - sistema visual
   Colores y tipografias del kit de marca de Neon Community.
   Regla del kit: el rojo nunca representa un dato, el cian nunca una accion.
   ===================================================================== */

/* reset minimo: lo que el navegador trae por defecto y aqui estorba */
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
:root{
  color-scheme:dark;
  /* Paleta oficial de Neon Community. Fuente: neoncm.es/recursos.php
     Rojo = accion y estado. Cian = dato y metrica. Es la regla del propio kit. */
  --void:#08080c;                    /* --bg           */
  --void-2:#0b0b10;
  --panel:#0f0f13;                   /* --bg2          */
  --panel-2:#15151c;
  --line:rgba(255,255,255,.09);      /* --border       */
  --line-soft:rgba(255,255,255,.055);
  --ink:#f5f5f7;                     /* --text         */
  --ink-dim:#a7a7b3;                 /* --text-muted   */
  --ink-faint:#7a7a86;               /* semantico "sistema" */

  --red:#ff2b3d;
  --red-rgb:255,43,61;
  --cyan:#3fc7e0;
  --cyan-rgb:63,199,224;
  /* cian atenuado para las claves de dato. 5,26:1 sobre el fondo: pasa AA.
     El #17697c anterior daba 3,19:1 y no llegaba. */
  --cyan-deep:#2b8ea6;

  /* semanticos del kit, listos para estados futuros */
  --ok:#20c96d;
  --warn:#ff8a3c;

  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --shell:1280px;
  --cut:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

*{box-sizing:border-box}

body{
  background:var(--void); color:var(--ink);
  font-family:var(--body); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

.ambient{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(780px 470px at 74% 8%, rgba(var(--red-rgb),.10), transparent 66%),
    radial-gradient(640px 640px at 3% 86%, rgba(var(--cyan-rgb),.07), transparent 70%);
}
/* trama de callejero: retícula ortogonal mas avenidas en diagonal, difuminada hacia abajo.
   Ambienta sin meter una foto que se coma el contraste del texto. */
.ambient::before{
  content:""; position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(0deg,  rgba(var(--cyan-rgb),.055) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(90deg, rgba(var(--cyan-rgb),.055) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(34deg, rgba(var(--red-rgb),.05) 0 1px, transparent 1px 236px),
    repeating-linear-gradient(-58deg, rgba(var(--red-rgb),.035) 0 1px, transparent 1px 310px);
  -webkit-mask-image:radial-gradient(1250px 780px at 72% -6%, #000 8%, transparent 72%);
  mask-image:radial-gradient(1250px 780px at 72% -6%, #000 8%, transparent 72%);
}
.ambient::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(to bottom, rgba(230,240,243,.016) 0 1px, transparent 1px 3px);
}

.shell{max-width:var(--shell); margin-inline:auto; padding-inline:30px}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px}

h1,h2,h3,h4{
  font-family:var(--display); font-weight:700;
  text-transform:uppercase; letter-spacing:.005em; margin:0;
}

.k{font-family:var(--mono); font-weight:500; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan-deep)}
.v{font-family:var(--mono); font-size:12px; color:var(--ink); font-variant-numeric:tabular-nums}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--cyan)}

/* ===== lockup de Neon con respaldo si la imagen no carga ===== */
.neon-lock{display:inline-flex; align-items:center; gap:9px}
.nl-mark{
  display:grid; place-items:center; width:1.9em; height:1.9em;
  background:var(--red); color:#0b0b10;
  font-family:var(--display); font-weight:800; font-size:1em; line-height:1;
  box-shadow:2px 0 0 rgba(var(--cyan-rgb),.9);
}
.nl-txt{display:flex; flex-direction:column; line-height:1; gap:.3em}
.nl-txt b{font-family:var(--display); font-weight:800; font-size:1em; letter-spacing:.03em}
/* la bajada solo aparece en la franja grande: por debajo de ~24px no es legible */
.nl-txt i{display:none; font-style:normal; font-family:var(--mono); font-size:.4em; letter-spacing:.22em; color:var(--cyan-deep)}
.neon-in .nl-txt i{display:block}

/* ===== gesto compartido: filete que crece desde el centro al pasar por encima =====
   .grow-l = barra vertical a la izquierda   .grow-t = barra horizontal arriba          */
.grow-l,.grow-t{position:relative}
.grow-l::before,.grow-t::before{
  content:""; position:absolute; background:var(--red);
  transform:scale(0); transition:transform .22s cubic-bezier(.3,.8,.3,1);
}
.grow-l::before{left:-14px; top:0; bottom:0; width:2px; transform:scaleY(0)}
.grow-t::before{top:-2px; left:0; right:0; height:2px; transform:scaleX(0)}
.grow-l:hover::before,.grow-l:focus-within::before{transform:scaleY(1)}
.grow-t:hover::before,.grow-t:focus-within::before{transform:scaleX(1)}

/* ===== cabecera ===== */
header.top{position:sticky; top:0; z-index:40; background:rgba(8,8,12,.88); backdrop-filter:blur(14px); border-bottom:1px solid var(--line-soft)}
.top-in{display:flex; align-items:center; gap:30px; height:66px}
.brand{display:flex; align-items:baseline; font-family:var(--display); font-weight:800; font-size:25px}
.brand .a{color:var(--red)}
.brand .b{color:var(--ink)}
/* punto final de la marca: cuadrado rojo con fantasma cian, no un glifo */
.brand .dot{
  display:inline-block; width:.38em; height:.38em; background:var(--red);
  box-shadow:2px 0 0 rgba(var(--cyan-rgb),.9);
  /* El punto cierra la marca. A la derecha solo queda el sitio del fantasma
     cian, que sobresale 2px: sin el, el resplandor se recorta. */
  margin:0 3px 0 .15em;
}
/* Los textos se apoyan en la MISMA linea base, no en el centro de su
   caja: "UN PROYECTO DE" mide 16px y NEON 22, asi que centrandolos la
   etiqueta quedaba flotando 4px por encima de la palabra.
   El logo y el respaldo si van centrados: son piezas graficas y no tienen
   linea base que compartir. */
.by{display:flex; align-items:baseline; gap:10px; padding-left:22px; border-left:1px solid var(--line)}
.by img, .by .neon-lock{align-self:center}
.by .k{white-space:nowrap}
.by img{height:22px; width:auto; display:block}
.by .neon-lock{font-size:13px}
/* El nombre va escrito al lado del logo, asi que si la imagen no carga el
   respaldo solo tiene que poner la marca: la palabra ya esta ahi. */
.by .nl-txt{display:none}
/* La marca de Neon, con la misma estructura que el lockup del kit: el
   nombre en la tipografia de titulares y la bajada en mono debajo. Antes
   era una linea suelta de 13px, y al lado de F5NODE se veia como un pie
   de foto en vez de como la otra marca de la cabecera. */
.by-n{
  /* En una linea, con COMMUNITY al lado y no debajo. Van con
     align-items:baseline para que las dos palabras se apoyen en la misma
     linea, que es lo que las hace leerse como un nombre y no como dos
     piezas pegadas. Es el mismo criterio que el .es de F5NODE. */
  display:flex; flex-direction:row; align-items:baseline; gap:.42em;
  line-height:1; white-space:nowrap; transition:color .18s;
}
.by-n b{
  font-family:var(--display); font-weight:800; font-size:22px;
  letter-spacing:.03em; color:var(--ink-dim); transition:color .18s;
}
.by-n i{
  font-style:normal; font-family:var(--mono); font-size:13px;
  letter-spacing:.2em; color:var(--cyan-deep);
}
.by:hover .by-n b{color:var(--ink)}

nav.main{display:flex; gap:26px; margin-left:auto}
nav.main a{position:relative; font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); padding:5px 0 7px; transition:color .18s}
nav.main a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--red);
  transform:scaleX(0); transition:transform .22s cubic-bezier(.3,.8,.3,1);
}
nav.main a:hover{color:var(--ink)}
nav.main a:hover::after,nav.main a:focus-visible::after{transform:scaleX(1)}

.btn{
  display:inline-flex; align-items:center; gap:9px; padding:11px 19px;
  font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  border:1px solid var(--line); color:var(--ink-dim);
  transition:border-color .18s, color .18s, background .18s;
}
.btn:hover{border-color:var(--cyan); color:var(--cyan)}
.btn-solid{clip-path:var(--cut); border:none; background:var(--red); color:#0b0b10}
.btn-solid:hover{background:#ff4757; color:#0b0b10}
.btn svg{flex:none}

.loadbar{height:2px; background:linear-gradient(90deg,var(--red),var(--cyan)); width:0; animation:sweep 1.05s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes sweep{0%{width:0;opacity:1}82%{opacity:1}100%{width:100%;opacity:0}}

main{position:relative; z-index:1}

/* ===== hero ===== */
.hero{display:grid; grid-template-columns:1.02fr .98fr; gap:60px; align-items:center; padding:62px 0 52px}
.kicker{display:flex; align-items:center; gap:12px}
.kicker .bar{width:34px; height:2px; background:var(--red)}
.hero h1{font-size:clamp(38px,4.9vw,66px); line-height:.9; font-weight:800; margin-top:20px; text-wrap:balance}
.hero h1 .split{color:var(--red); text-shadow:2px 0 0 rgba(var(--cyan-rgb),.85)}
.hero p.lede{max-width:50ch; color:var(--ink-dim); font-size:16.5px; margin:22px 0 0}
.hero p.lede code{font-family:var(--mono); font-size:14px; color:var(--cyan); background:rgba(var(--cyan-rgb),.07); padding:1px 6px}
.hero-cta{display:flex; gap:12px; margin-top:30px; flex-wrap:wrap}

.stats{display:flex; gap:42px; margin-top:38px; flex-wrap:wrap}
.stat b{display:block; font-family:var(--display); font-weight:700; font-size:32px; line-height:1.05; color:var(--cyan); font-variant-numeric:tabular-nums}
.stat span{display:block; margin-top:3px}

/* ===== selector de zonas de tatuaje ===== */
.zframe{padding:1px; background:var(--line); clip-path:var(--cut)}
.zone{background:linear-gradient(170deg,var(--panel) 0%,var(--void-2) 100%); clip-path:var(--cut); padding:24px 26px 22px}
.zone-head{display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:14px}
.zone-grid{display:grid; grid-template-columns:170px minmax(0,1fr); gap:26px; align-items:center}

svg.body{width:100%; height:auto; display:block}
.part{
  fill:#0f0f13; stroke:rgba(255,255,255,.14); stroke-width:1.5; cursor:pointer;
  transition:fill .18s ease, stroke .18s ease;
}
.part:hover{fill:#15151c; stroke:var(--cyan-deep)}
.part[aria-checked="true"]{fill:var(--red); stroke:var(--red)}
.part:focus-visible{outline:none; stroke:var(--cyan); stroke-width:2.5}
.pgrid{stroke:var(--cyan); stroke-width:.5; opacity:.14; fill:none}

.zone-info h3{font-size:26px; font-weight:800; line-height:1.04}
.zone-info > p{color:var(--ink-dim); font-size:13.5px; margin:8px 0 0}
.zone-nums{display:flex; gap:26px; margin-top:16px; flex-wrap:wrap}
.zone-nums div{display:flex; flex-direction:column; gap:2px}
.zone-nums b{font-family:var(--display); font-weight:700; font-size:26px; line-height:1; color:var(--cyan); font-variant-numeric:tabular-nums}
.zone-list{list-style:none; padding:0; margin:18px 0 0; border-top:1px solid var(--line-soft)}
.zone-list li{display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line-soft); font-size:13.5px}
.zone-list li span:last-child{font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); white-space:nowrap}

/* ===== estructura de seccion ===== */
section.block{padding-top:34px}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding-top:28px; border-top:1px solid var(--line); margin-bottom:26px; flex-wrap:wrap}
.sec-head h2{font-size:30px; font-weight:800}
.sec-head p{color:var(--ink-dim); font-size:14.5px; margin:8px 0 0; max-width:56ch}
.sec-head .right{display:flex; align-items:baseline; gap:10px}

/* ===== estudio de tatuajes ===== */
.tat{display:grid; grid-template-columns:repeat(3,1fr); gap:0}
.tat > div{padding:22px 30px 24px 0; border-top:2px solid var(--line)}
.tat > div::before{top:-2px; left:0; right:30px; height:2px}
.tat > div:first-child{border-top-color:var(--red)}
.tat h4{font-size:18px; font-weight:700; margin:10px 0 7px}
.tat p{color:var(--ink-dim); font-size:14px; margin:0; max-width:34ch}
.tat .n{font-family:var(--display); font-weight:800; font-size:34px; line-height:1; color:var(--ink-faint)}
.tat-foot{display:flex; align-items:center; gap:18px; margin-top:30px; flex-wrap:wrap}
.tat-foot .k{max-width:44ch; line-height:1.9}

/* ===== manual: fichas de codigo ===== */
/* minmax(0,1fr) y no 1fr a secas: el minimo de 1fr es el ancho del
   contenido, asi que una linea de codigo larga ensancha su columna y le
   roba el sitio a la otra. Con el 0 las dos miden lo mismo y el <pre> se
   desplaza por dentro, que para eso lleva overflow-x. */
.snips{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start}
.snip{border:1px solid var(--line); background:var(--void-2); display:flex; flex-direction:column; transition:border-color .18s}
.snip:hover{border-color:rgba(255,255,255,.18)}
.snip::before{left:-1px; top:0; bottom:0; width:3px}
.snip-head{display:flex; justify-content:space-between; align-items:center; gap:14px; padding:14px 16px; background:var(--panel); border-bottom:1px solid var(--line-soft)}
.snip-head h4{font-size:15.5px; font-weight:700; letter-spacing:.02em}
.snip-head .k{white-space:nowrap}
.snip > p{color:var(--ink-dim); font-size:13.5px; margin:0; padding:13px 16px 0}
.snip pre{margin:0; padding:14px 16px 18px; overflow-x:auto; font-family:var(--mono); font-size:12px; line-height:1.75; color:var(--ink-dim); flex:1}
.snip .cm,.doc-code .cm{color:var(--ink-faint)}
.snip .kw,.doc-code .kw{color:var(--red)}
.snip .fn,.doc-code .fn{color:var(--cyan)}
.snip .st,.doc-code .st{color:#c9c9d4}
.snip-aviso{margin:0; padding:12px 16px 0; font-size:12.5px; color:var(--ink-dim); border-left:2px solid var(--red); margin-left:16px; padding-left:12px}
.snip-aviso code{font-family:var(--mono); font-size:11.5px; color:var(--cyan-deep)}
.snip-nota{color:var(--ink-faint); font-size:12.5px; margin:0; padding:0 16px 2px; border-top:1px solid var(--line-soft); padding-top:12px}
.snip-nota code{font-family:var(--mono); font-size:11.5px; color:var(--cyan-deep)}
.snip > p code{font-family:var(--mono); font-size:12px; color:var(--cyan-deep)}
.snip-foot{display:flex; justify-content:flex-end; padding:0 16px 14px}

.cbtn{
  padding:8px 14px; font-family:var(--mono); font-weight:500; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); border:1px solid var(--line);
  transition:border-color .18s, color .18s, background .18s;
}
.cbtn:hover{border-color:var(--red); color:var(--red); background:rgba(var(--red-rgb),.06)}

/* ===== apps lb-phone: fichas en filas ===== */
.filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:4px}
.filters button{
  padding:9px 15px; font-family:var(--mono); font-weight:500; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); border:1px solid var(--line);
  transition:border-color .18s, color .18s, background .18s;
}
.filters button:hover{border-color:var(--cyan); color:var(--cyan)}
.filters button[aria-pressed="true"]{background:var(--red); border-color:var(--red); color:#0b0b10}

.cols,.row{display:grid; grid-template-columns:62px minmax(0,1fr) 156px 116px 126px; gap:24px; align-items:center}
.cols{padding:14px 14px 10px 0; border-bottom:1px solid var(--line)}
.cols span{font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint)}
.cols .ta-r{text-align:right}

.row{position:relative; padding:19px 14px 19px 0; border-bottom:1px solid var(--line-soft); transition:background .18s}
.row::before{content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:var(--red); transform:scaleY(0); transition:transform .2s ease}
.row:hover{background:linear-gradient(90deg, rgba(var(--red-rgb),.055), transparent 58%)}
.row:hover::before{transform:scaleY(1)}

.idx{display:flex; flex-direction:column; gap:2px}
.idx b{font-family:var(--display); font-weight:700; font-size:26px; line-height:1; color:var(--ink-faint); font-variant-numeric:tabular-nums}
.idx i{font-style:normal; font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; color:var(--cyan-deep)}

.row h4{font-size:17.5px; font-weight:700; line-height:1.15}
.row > div > p{color:var(--ink-dim); font-size:13.5px; margin:5px 0 0; line-height:1.45}

.spec{display:flex; flex-wrap:wrap; gap:6px 22px; margin-top:11px; align-items:baseline}
.spec > div{display:flex; align-items:baseline; gap:7px}
.spec .val{font-family:var(--mono); font-size:11.5px; color:var(--ink-dim); font-variant-numeric:tabular-nums}
.spec .val b{color:var(--ink); font-weight:400}

.score{display:flex; flex-direction:column; gap:7px}
.score .top{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.score .val{font-family:var(--mono); font-weight:500; font-size:14px; color:var(--cyan); font-variant-numeric:tabular-nums}
.bars{display:flex; gap:2px; height:9px}
.bars i{flex:1; background:#22222b}
.bars i.on{background:var(--cyan)}
.bars i.on.hot{background:var(--red)}

.dl{display:flex; flex-direction:column; gap:3px; text-align:right}
.dl b{font-family:var(--mono); font-weight:500; font-size:14px; color:var(--ink); font-variant-numeric:tabular-nums}
.act{display:flex; justify-content:flex-end}
.ens{width:100%; padding:11px 8px; text-align:center; font-family:var(--mono); font-weight:500; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); border:1px solid var(--line); transition:border-color .18s, color .18s, background .18s}
.ens:hover{border-color:var(--red); color:var(--red); background:rgba(var(--red-rgb),.06)}

.empty{padding:52px 20px; text-align:center; color:var(--ink-dim); border-bottom:1px solid var(--line-soft)}
.empty b{display:block; font-family:var(--display); font-weight:800; font-size:24px; text-transform:uppercase; color:var(--ink); margin-bottom:8px}

/* ===== franja de Neon ===== */
.neon-band{margin-top:76px; padding:1px; background:linear-gradient(120deg, var(--red), var(--cyan-deep) 62%, var(--line)); clip-path:var(--cut)}
.neon-in{
  background:linear-gradient(120deg, #16090c 0%, var(--void-2) 46%, #071418 100%);
  clip-path:var(--cut); padding:44px 46px;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:44px; align-items:center;
}
.neon-in .logo img{height:64px; width:auto; display:block}
.neon-in .logo .neon-lock{font-size:34px}
.neon-in h2{font-size:30px; font-weight:800; line-height:1.02}
.neon-in h2 .split{color:var(--red); text-shadow:2px 0 0 rgba(var(--cyan-rgb),.85)}
.neon-in p{color:var(--ink-dim); font-size:14.5px; margin:10px 0 0; max-width:54ch}
.neon-nums{display:flex; gap:30px; margin-top:18px; flex-wrap:wrap}
.neon-nums div{display:flex; flex-direction:column; gap:2px}
.neon-nums b{font-family:var(--display); font-weight:700; font-size:24px; line-height:1; color:var(--cyan); font-variant-numeric:tabular-nums}
.neon-cta{display:flex; flex-direction:column; gap:10px}

/* ===== pie ===== */
footer{margin-top:74px; border-top:1px solid var(--line); padding:36px 0 52px}
.foot-in{display:flex; justify-content:space-between; gap:34px; flex-wrap:wrap; align-items:center}
.foot-brand{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.foot-brand .sep{width:1px; height:24px; background:var(--line)}
.foot-brand img{height:28px; width:auto; display:block}
.foot-brand .neon-lock{font-size:15px}
/* La marca de Neon en el pie: logo mas nombre, igual que en la cabecera.
   Antes iba el cuadrado a secas y, al lado de F5NODE, se veia como un
   icono suelto en vez de como la otra marca. */
.foot-neon{display:flex; align-items:center; gap:13px}
/* En el pie la marca va mayor que en la cabecera: aqui no compite con el
   menu y tiene que sostener el peso de F5NODE, que va a 25px. */
.foot-neon img{height:38px}
.foot-neon .by-n b{font-size:25px}
.foot-neon .by-n i{font-size:11px; letter-spacing:.18em}
.foot-neon:hover .by-n b{color:var(--ink)}
.foot-links{display:flex; gap:24px; flex-wrap:wrap}
.foot-links a{font-size:13px; color:var(--ink-dim)}
.foot-links a:hover{color:var(--cyan)}
.disclaimer{max-width:64ch; font-size:12px; color:var(--ink-faint); margin-top:24px; line-height:1.65}

.toast{
  position:fixed; left:30px; bottom:30px; z-index:60; max-width:350px;
  background:rgba(11,17,22,.97); border:1px solid var(--line); border-left:3px solid var(--red);
  padding:14px 22px 14px 17px; backdrop-filter:blur(8px);
  transform:translateX(-130%); transition:transform .34s cubic-bezier(.2,.8,.2,1);
}
.toast[data-on="true"]{transform:translateX(0)}
.toast strong{display:block; font-family:var(--display); font-weight:700; font-size:16px; text-transform:uppercase; color:var(--red)}
.toast span{font-family:var(--mono); font-size:11.5px; color:var(--ink-dim)}

.skip{position:absolute; left:-9999px; top:0; background:var(--red); color:#0b0b10; padding:11px 17px; z-index:80; font-weight:700}
.skip:focus{left:14px; top:14px}

@media (max-width:1080px){
  .hero{grid-template-columns:1fr; gap:44px; padding:46px 0 40px}
  .by{margin-left:auto; border-left:0; padding-left:0}

  /* El menu baja a una segunda linea y se desliza a lo ancho. Son cuatro
     entradas: un desplegable seria mas cosas que abrir para lo mismo.
     Antes aqui el menu se escondia y ya esta, pero eso valia cuando la web
     era una sola pagina con anclas: ahora son cinco y hay que poder salir. */
  .top-in{flex-wrap:wrap; height:auto; padding-block:11px; row-gap:9px; gap:18px}
  nav.main{
    order:3; flex-basis:100%; margin-left:0; gap:20px;
    overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
  }
  nav.main::-webkit-scrollbar{display:none}
  nav.main a{white-space:nowrap; padding-bottom:4px}
  .snips{grid-template-columns:1fr}
  .tat{grid-template-columns:1fr 1fr}
  .neon-in{grid-template-columns:auto minmax(0,1fr); gap:32px; padding:34px 30px}
  .neon-cta{grid-column:1/-1; flex-direction:row; flex-wrap:wrap}
  .cols,.row{grid-template-columns:54px minmax(0,1fr) 140px 106px}
  .cols .c-act,.act{display:none}
}
@media (max-width:760px){
  .shell{padding-inline:20px}
  .by .k{display:none}
  .zone-grid{grid-template-columns:1fr; gap:20px; justify-items:center}
  .zone-grid > .body-wrap{width:150px}
  .zone-info{width:100%}
  .tat{grid-template-columns:1fr}
  .tat > div{padding-right:0}
  .cols{display:none}
  .row{grid-template-columns:1fr; gap:14px; padding:22px 0}
  .row::before{left:-10px}
  .idx{flex-direction:row; align-items:baseline; gap:10px}
  .dl{text-align:left; flex-direction:row; gap:8px; align-items:baseline}
  .neon-in{grid-template-columns:1fr; gap:24px; padding:30px 22px}
  .toast{left:16px; right:16px; bottom:16px; max-width:none}
  .stats{gap:26px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

/* =====================================================================
   Redes de Neon
   Un enlace es una accion, asi que el hover es rojo, como los demas
   botones. Los iconos los pinta assets/js/base.js.
   ===================================================================== */
.socials{display:flex; gap:8px; flex-wrap:wrap}
.socials a{
  display:grid; place-items:center; width:34px; height:34px;
  border:1px solid var(--line); color:var(--ink-dim);
  transition:border-color .18s, color .18s, background .18s;
}
.socials a:hover{border-color:var(--red); color:var(--red); background:rgba(var(--red-rgb),.06)}
.socials svg{display:block}

/* =====================================================================
   Cabecera de pagina interior
   Mismo gesto que el hero de la portada pero con menos aire: en una
   pagina interior el titular no tiene que ocupar la primera pantalla.
   Con :has, si la cabecera trae un widget al lado, se parte en dos.
   ===================================================================== */
.page-head{padding:46px 0 34px}
.page-head h1{font-size:clamp(32px,4.1vw,54px); line-height:.92; font-weight:800; margin-top:18px; text-wrap:balance}
.page-head h1 .split{color:var(--red); text-shadow:2px 0 0 rgba(var(--cyan-rgb),.85)}
.page-head p.lede{max-width:58ch; color:var(--ink-dim); font-size:16px; margin:20px 0 0}
.page-head p.lede code{font-family:var(--mono); font-size:13.5px; color:var(--cyan); background:rgba(var(--cyan-rgb),.07); padding:1px 6px}
.page-head:has(.zframe){display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center}

/* pagina actual en el menu: el filete rojo se queda puesto */
nav.main a[aria-current="page"]{color:var(--ink)}
nav.main a[aria-current="page"]::after{transform:scaleX(1)}


/* =====================================================================
   Redes en el pie
   ===================================================================== */
.foot-social{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:28px; padding-top:24px; border-top:1px solid var(--line-soft)}

@media (max-width:1080px){
  .page-head:has(.zframe){grid-template-columns:1fr; gap:40px}
}
@media (max-width:760px){
  .page-head{padding:32px 0 26px}
}

/* =====================================================================
   Portada: la captura del estudio de tatuajes
   Es una captura de verdad del editor, no un montaje. Va enmarcada con
   el mismo bisel que el resto de paneles para que no parezca pegada.
   ===================================================================== */
.hero-shot{margin:0; padding:1px; background:var(--line); clip-path:var(--cut); transition:background .22s}
.hero-shot:hover{background:linear-gradient(150deg,var(--red),var(--cyan-deep))}
.hero-shot a{display:block; position:relative; clip-path:var(--cut); background:var(--void-2)}
.hero-shot img{
  display:block; width:100%; height:auto; max-height:min(62vh,560px);
  object-fit:cover; object-position:center 22%;
}
.hero-shot figcaption{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:26px 18px 13px;
  background:linear-gradient(transparent, rgba(8,8,12,.9));
}
@media (max-width:760px){
  .hero-shot img{max-height:52vh}
}

/* =====================================================================
   Pestañas del catalogo
   Una pista con la pastilla activa deslizandose por debajo y el numero de
   aplicaciones al lado de cada nombre. La pastilla es un solo elemento que
   se mueve y se estira: mover uno es mucho mas barato que animar cinco
   fondos, y ademas se ve de donde viene y adonde va.

   Se respeta la regla del kit: la pastilla y su filete son ESTADO, y van en
   rojo; el contador es un DATO, y va en cian. Por eso el numero no cambia
   de color al activarse, solo sube de brillo.
   ===================================================================== */
.tabs{
  position:relative; display:flex; gap:2px; flex-wrap:wrap;
  padding:4px; border:1px solid var(--line); background:var(--void-2);
  margin-bottom:4px;
}

/* La pastilla. Empieza sin transicion (--sin-mover) para que al cargar
   aparezca ya puesta en su sitio en vez de venir volando desde la esquina. */
.tabs-ind{
  position:absolute; z-index:0; top:4px; left:0; height:calc(100% - 8px);
  width:0; background:var(--panel-2); border:1px solid var(--line);
  transform:translateX(0);
  transition:transform .3s cubic-bezier(.3,1.08,.35,1), width .3s cubic-bezier(.3,1.08,.35,1);
}
.tabs-ind::after{
  content:""; position:absolute; left:-1px; right:-1px; bottom:-1px; height:2px;
  background:var(--red);
}
.tabs.sin-mover .tabs-ind{transition:none}

.tabs button{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 15px;
  font-family:var(--mono); font-weight:500; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim);
  transition:color .18s;
}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:var(--ink)}
.tabs button:focus-visible{outline:2px solid var(--cyan); outline-offset:-2px}

/* El contador */
.tabs .b{
  display:inline-grid; place-items:center; min-width:20px; height:17px; padding:0 5px;
  font-size:10px; letter-spacing:.02em; line-height:1;
  color:var(--cyan-deep); background:rgba(var(--cyan-rgb),.09);
  font-variant-numeric:tabular-nums;
  transition:color .18s, background .18s;
}
.tabs button[aria-selected="true"] .b{color:var(--cyan); background:rgba(var(--cyan-rgb),.16)}

/* Al activarse, el contador da un salto corto. Es el guiño del componente
   original, donde la insignia se anima cuando cambia. */
@keyframes tabs-salto{
  0%{transform:scale(1)}
  40%{transform:scale(1.22)}
  100%{transform:scale(1)}
}
.tabs button[aria-selected="true"] .b.salta{animation:tabs-salto .34s cubic-bezier(.3,1.1,.35,1)}

/* Sin pastilla no hay a donde deslizarse: cuando las pestañas se parten en
   varias lineas, cada una se pinta su propio fondo y se esconde la pastilla. */
.tabs.partido .tabs-ind{display:none}
.tabs.partido button[aria-selected="true"]{background:var(--panel-2); box-shadow:inset 0 -2px 0 var(--red)}

@media (max-width:760px){
  .tabs button{padding:9px 12px; gap:7px}
}

/* =====================================================================
   Ambientacion: la ciudad
   Dos ilustraciones, una arriba y otra en el pie. Van con un velo oscuro
   ENCIMA, no con opacidad: bajando la opacidad se aclara la imagen y el
   texto blanco pierde contraste, mientras que un degradado casi opaco por
   delante deja el fondo oscuro y solo asoma la silueta.

   Las dos se desvanecen hasta el negro del sitio para que no se vea el
   corte de la imagen.
   ===================================================================== */

/* ── arriba, solo en la portada ── */
main:has(.hero)::before{
  content:""; position:absolute; top:0; left:0; right:0; height:660px; z-index:0;
  background:
    linear-gradient(to bottom,
      rgba(8,8,12,.62) 0%,
      rgba(8,8,12,.80) 45%,
      rgba(8,8,12,.96) 82%,
      var(--void) 100%),
    url("../img/ciudad-cian.webp") center top / cover no-repeat;
  pointer-events:none;
}
main:has(.hero) > *{position:relative; z-index:1}

/* ── arriba, en las paginas de listado que la pidan (docs) ──
   Misma ilustracion que la portada y no una nueva: a estas alturas ya
   esta en cache. Va mas baja y con el velo mas cerrado porque aqui el
   titular arranca casi pegado a la cabecera, donde la imagen es mas
   clara, y el texto gris de la entradilla necesita el fondo oscuro. */
main.con-ciudad::before{
  content:""; position:absolute; top:0; left:0; right:0; height:430px; z-index:0;
  background:
    /* El velo NO se abre donde hay texto. Medido: el titulillo, el titular y
       la entradilla ocupan del 11% al 52%, y la cabecera del listado del 74%
       al 98%. La ciudad asoma en el hueco de en medio. Con el velo abierto
       arriba, el titulillo en cian caia a 3,79:1 y en plano tiene 5,26. */
    linear-gradient(to bottom,
      rgba(8,8,12,.93) 0%,
      rgba(8,8,12,.91) 50%,
      rgba(8,8,12,.66) 62%,
      rgba(8,8,12,.70) 70%,
      rgba(8,8,12,.93) 78%,
      var(--void) 100%),
    url("../img/ciudad-cian.webp") center 26% / cover no-repeat;
  pointer-events:none;
}
main.con-ciudad > *{position:relative; z-index:1}

/* ── abajo, en todas las paginas ── */
footer{position:relative; overflow:hidden}
footer::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(to bottom,
      var(--void) 0%,
      rgba(8,8,12,.93) 22%,
      rgba(8,8,12,.86) 100%),
    url("../img/ciudad-roja.webp") center bottom / cover no-repeat;
  pointer-events:none;
}
footer > .shell{position:relative; z-index:1}

/* En movil la imagen se recorta tanto que solo se ve un trozo de asfalto:
   se sube el encuadre a la linea del horizonte, que es lo que se reconoce. */
@media (max-width:760px){
  main:has(.hero)::before{height:520px; background-position:center top, 62% top}
  main.con-ciudad::before{height:330px; background-position:center top, 62% 26%}
  footer::before{background-position:center bottom, 60% bottom}
}

/* =====================================================================
   Catalogo de la portada
   Fichas compactas: lo que importa de un vistazo es de que tipo es cada
   cosa y como se llama, no leerse la descripcion entera.
   ===================================================================== */
.cat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(266px,1fr)); gap:16px; margin-top:22px}
.cat-card{
  display:flex; flex-direction:column; gap:7px; padding:19px 21px;
  border:1px solid var(--line); background:var(--void-2); transition:border-color .18s;
}
.cat-card:hover{border-color:rgba(255,255,255,.18)}
.cat-card::before{left:-1px; top:0; bottom:0; width:3px}
.cat-card h3{font-size:16.5px; font-weight:700; line-height:1.15}
.cat-card p{color:var(--ink-dim); font-size:13.5px; margin:0}

/* Un grupo sin nada todavia se apaga, pero se queda: asi se ve que existe
   y que aun esta vacio, en vez de aparecer de la nada mas adelante. */
.tabs button.vacio{color:var(--ink-faint)}
.tabs button.vacio .b{color:var(--ink-faint); background:rgba(255,255,255,.04)}

/* =====================================================================
   Credito del framework
   Neon corre sobre Qbox, y eso se dice con su logo y un enlace a su
   repositorio, que es como se acredita un proyecto de codigo abierto.
   ===================================================================== */
.base-qbx-caja{margin-top:22px; max-width:min(100%,460px)}
.base-qbx{
  display:flex; align-items:center; gap:14px;
  margin-top:0; padding:12px 16px 12px 12px;
  border:1px solid var(--line); background:rgba(8,8,12,.5);
  max-width:min(100%,460px);
  transition:border-color .18s, background .18s;
}
.base-qbx:hover{border-color:var(--cyan); background:rgba(8,8,12,.75)}
.base-qbx img{width:38px; height:38px; flex:none; display:block}
.base-qbx > span{display:flex; flex-direction:column; gap:2px; min-width:0}
.base-qbx b{font-family:var(--display); font-weight:700; font-size:14.5px; text-transform:uppercase; color:var(--ink)}
.base-qbx i{font-style:normal; font-size:12px; color:var(--ink-faint); line-height:1.4}
.base-qbx svg{flex:none; margin-left:auto; color:var(--cyan-deep); transition:color .18s}
.base-qbx:hover svg{color:var(--cyan)}

/* Enlace secundario al repositorio: la documentacion es lo que se lee a
   diario, el codigo fuente se visita de vez en cuando. Por eso uno es la
   tarjeta y el otro una linea debajo. */
.base-qbx-git{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:8px; padding:2px 0;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.04em;
  color:var(--ink-faint); transition:color .18s;
}
.base-qbx-git:hover{color:var(--cyan)}
.base-qbx-git svg{flex:none; color:var(--cyan-deep); transition:color .18s}
.base-qbx-git:hover svg{color:var(--cyan)}

@media (max-width:760px){
  .base-qbx i{display:none}
}

/* =====================================================================
   Ajustes derivados de quitar la captura del hero y de las ciudades
   ===================================================================== */

/* Sin la captura al lado, el hero pasa a una sola columna, pero el texto
   NO se estira a lo ancho de la pantalla: a 1280 px el titular caeria en
   una linea y perderia toda la fuerza, y el parrafo se volveria ilegible
   de tan largo. Se le pone una medida y se gana aire arriba. */
.hero:not(:has(.hero-shot, .hero-marca)){grid-template-columns:minmax(0,760px); padding:74px 0 58px}

/* El descargo del pie va en el gris mas apagado del sistema, que sobre el
   fondo liso ya esta en 4,72:1, justo por encima del minimo. Cualquier
   imagen por detras lo baja de AA, asi que el velo se cierra del todo
   antes de llegar a el: la ciudad se ve arriba del pie y no debajo. */
footer::before{
  background:
    linear-gradient(to bottom,
      var(--void) 0%,
      rgba(8,8,12,.88) 26%,
      rgba(8,8,12,.93) 58%,
      var(--void) 78%),
    url("../img/ciudad-roja.webp") center bottom / cover no-repeat;
}

/* =====================================================================
   El logo de Neon en grande, al lado del titular
   Es decoracion: la marca ya esta escrita en la cabecera y en la franja,
   asi que va con aria-hidden y sin texto alternativo. El resplandor lo
   ponen dos sombras en los dos colores del kit, no una imagen aparte.
   ===================================================================== */
.hero-marca{display:grid; place-items:center; pointer-events:none}
.hero-marca img{
  display:block; width:min(100%,470px); height:auto;
  filter:drop-shadow(0 0 54px rgba(var(--red-rgb),.34))
         drop-shadow(0 0 130px rgba(var(--cyan-rgb),.22));
}

@media (max-width:1080px){
  /* Debajo del texto y mas pequeño: en vertical, un logo a 470 px empuja
     todo el contenido fuera de la primera pantalla. */
  .hero-marca img{width:min(60%,300px)}
}
@media (max-width:760px){
  .hero-marca img{width:min(52%,220px)}
}

/* =====================================================================
   Franja de Neon: el logo pasa a la derecha, encima de los botones
   Antes iba suelto y pequeño en una tercera columna a la izquierda. Al
   moverlo con los botones la franja se queda en dos columnas y el hueco
   que sobraba a la derecha se llena.
   ===================================================================== */
.neon-in{grid-template-columns:minmax(0,1fr) auto}
.neon-cta{align-items:stretch; gap:11px}
.neon-cta .logo{display:grid; place-items:center; margin-bottom:8px}
.neon-cta .logo img{
  width:200px; height:auto;
  filter:drop-shadow(0 0 34px rgba(var(--red-rgb),.3))
         drop-shadow(0 0 80px rgba(var(--cyan-rgb),.18));
}
.neon-cta .neon-lock{font-size:26px}

@media (max-width:1080px){
  /* Una sola columna: el bloque del logo y los botones va debajo del texto
     y centrado, en vez de intentar caber al lado. */
  .neon-in{grid-template-columns:1fr}
  .neon-cta{grid-column:auto; flex-direction:column; align-items:center}
  .neon-cta .btn{width:100%; max-width:320px; justify-content:center}
  .neon-cta .logo img{width:160px}
}

/* =====================================================================
   Botón secundario, versión con la esquina cortada
   El primario (.btn-solid) lleva el bisel del sistema y el secundario era
   un rectángulo plano, así que juntos no parecían de la misma familia.

   El truco: un borde no puede seguir un clip-path, así que el fondo del
   propio botón hace de filete y un pseudo-elemento metido 1px por dentro
   tapa el centro. El isolation es lo que permite mandar ese pseudo detrás
   del texto sin que se cuele debajo del filete.
   ===================================================================== */
.btn-linea{
  position:relative; isolation:isolate;
  border:0; clip-path:var(--cut);
  background:var(--line); color:var(--ink-dim);
  transition:background .18s, color .18s;
}
.btn-linea::before{
  content:""; position:absolute; inset:1px; z-index:-1;
  background:var(--void-2); clip-path:var(--cut);
  transition:background .18s;
}
/* Rojo al pasar por encima, no cian: un botón es una acción, y así hace
   pareja con el primario en vez de parecer un dato. */
.btn-linea:hover{background:var(--red); color:var(--ink)}
.btn-linea:hover::before{background:rgba(var(--red-rgb),.12)}
.btn-linea:focus-visible{outline-offset:4px}