/* Sitio de la prueba · estilo neobrutalista a juego con los vídeos */
:root{
  --ink:#121212; --paper:#FFF3E0; --white:#fff;
  --c1:#FF6B1A; --c2:#FFCF1A; --c3:#2ED3F5; --c4:#FF4FA0; --lime:#B6FF3B;
  --fd:'Archivo Black','Arial Black',Impact,sans-serif;
  --fb:'Space Grotesk',system-ui,sans-serif;
  --fm:'Space Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:500 17px/1.55 var(--fb);
  background-image:linear-gradient(rgba(18,18,18,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(18,18,18,.06) 1px,transparent 1px);
  background-size:40px 40px;padding:0 16px}
a{color:inherit}
img,video{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto}
.box{background:#fff;border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.tag{display:inline-block;font:700 13px/1 var(--fm);text-transform:uppercase;letter-spacing:.03em;padding:7px 10px;border:3px solid var(--ink);background:#fff}
.tag.dark{background:var(--ink);color:#fff}
.btn{display:inline-block;font:700 15px/1 var(--fb);text-decoration:none;padding:11px 16px;border:3px solid var(--ink);background:var(--c2);box-shadow:4px 4px 0 var(--ink);transition:translate .1s,box-shadow .1s}
.btn:hover{translate:-2px -2px;box-shadow:6px 6px 0 var(--ink)}
.btn.alt{background:#fff}
h2{font:clamp(28px,4.4vw,44px)/1.05 var(--fd);margin:0 0 18px}
h3{font:22px/1.15 var(--fd)}
section{padding:56px 0 8px}
p+p{margin-top:12px}
code{font:600 .9em var(--fm);background:rgba(18,18,18,.08);padding:1px 5px}

/* Cabecera */
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:18px 0}
.top nav{display:flex;gap:8px;flex-wrap:wrap}
.top nav a{font:700 13px var(--fm);text-transform:uppercase;text-decoration:none;padding:6px 9px;border:3px solid var(--ink);background:#fff}
.top nav a:hover{background:var(--c2)}
.hero{padding:36px 0 20px}
.hero h1{font:clamp(40px,7.5vw,88px)/.95 var(--fd);letter-spacing:-.01em;margin:18px 0 36px}
.hero h1 .hl{background:var(--c4);padding:0 .12em;border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);display:inline-block;rotate:-1.5deg}
.hero .lead{font-size:clamp(18px,2.2vw,22px);max-width:820px}
.warn{margin-top:26px;padding:18px 20px;background:var(--c2);display:flex;gap:16px;align-items:flex-start}
.warn b{font-family:var(--fd);font-weight:400}
.warn .ico{font-size:34px;line-height:1}

/* Prompt */
.prompt{padding:22px 24px;background:var(--ink);color:#fff;font:600 18px/1.5 var(--fm);box-shadow:8px 8px 0 var(--c3)}

/* Tabla */
.tblwrap{overflow-x:auto;border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);background:#fff}
table{border-collapse:collapse;width:100%;min-width:900px;font-size:15px}
th,td{padding:10px 12px;border-bottom:2px solid var(--ink);text-align:left;vertical-align:top}
th{font:700 12px var(--fm);text-transform:uppercase;background:var(--ink);color:#fff;position:sticky;top:0}
td:first-child{font-weight:700}
tr:last-child td{border-bottom:0}
.y{color:#0a7d27;font-weight:700}.n{color:#b3261e;font-weight:700}.m{color:#8a5a00;font-weight:700}
.note{font-size:14px;margin-top:12px;opacity:.85}

/* Fichas */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:28px}
.card{display:flex;flex-direction:column}
.card .hd{padding:14px 16px;border-bottom:4px solid var(--ink);background:var(--c);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}
.card .hd small{font:700 12px var(--fm);text-transform:uppercase}
.card video{width:100%;aspect-ratio:16/9;background:#111;border-bottom:4px solid var(--ink)}
.card .bd{padding:16px;display:flex;flex-direction:column;gap:12px;flex:1}
.facts{display:flex;flex-wrap:wrap;gap:6px}
.facts span{font:700 12px var(--fm);padding:4px 7px;border:2px solid var(--ink);background:var(--paper)}
.card ul{padding-left:20px}
.card li+li{margin-top:4px}
.card .act{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap}

/* Saga de iteraciones */
.saga{display:grid;gap:18px}
.step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:0}
.step video{width:100%;height:100%;aspect-ratio:16/9;background:#111;border-right:4px solid var(--ink);object-fit:contain}
.step .bd{padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.step .v{font:28px/1 var(--fd)}
.state{font:700 12px var(--fm);text-transform:uppercase;padding:4px 8px;border:2px solid var(--ink);align-self:flex-start}
.state.bad{background:#ffb4ab}.state.mid{background:var(--c2)}.state.ok{background:var(--lime)}
@media (max-width:760px){.step{grid-template-columns:1fr}.step video{border-right:0;border-bottom:4px solid var(--ink)}}

/* Hallazgos */
.finds{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:22px}
.find{padding:18px}
.find h3{margin-bottom:8px}
.find:nth-child(4n+1){background:#FFE3D2}.find:nth-child(4n+2){background:#FFF4C4}.find:nth-child(4n+3){background:#D6F6FD}.find:nth-child(4n){background:#FFDDEC}

.en{background:var(--ink);color:#fff;padding:28px;box-shadow:8px 8px 0 var(--c4);border:4px solid var(--ink)}
.en h2{color:var(--c2)}
.en p{max-width:900px}
footer{margin:64px 0 32px;padding:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
footer .links{display:flex;gap:8px;flex-wrap:wrap}

/* Firma */
.byline{display:inline-flex;align-items:center;gap:12px;margin-top:22px;text-decoration:none;padding:6px 14px 6px 6px;background:#fff;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);border-radius:999px}
.byline img{width:56px;height:56px;border-radius:50%;border:3px solid var(--ink);object-fit:cover;background:#fff}
.byline span{display:flex;flex-direction:column;line-height:1.2}
.byline small{font:700 12px var(--fm);text-transform:uppercase}
.fby{display:flex;align-items:center;gap:14px}
.fby img{width:64px;height:64px;border-radius:50%;border:3px solid var(--ink);object-fit:cover;background:#fff}
.op{background:var(--paper);border-left:6px solid var(--c);padding:10px 12px;font-size:15px}
.prices{margin-top:26px;padding:18px 20px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;background:#E8FFD0}
.prices > div{flex:1 1 420px}
.prices h3{margin-bottom:6px}
.prices p{font-size:15px}
.costs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:18px;margin-bottom:24px}
.cfig{padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.cfig:nth-child(1){background:#FFE3D2}.cfig:nth-child(2){background:#FFF4C4}.cfig:nth-child(3){background:#D6F6FD}.cfig:nth-child(4){background:#FFDDEC}
.cfig b{font:40px/1 var(--fd)}
.cfig span{font:700 13px var(--fm);text-transform:uppercase}
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:24px}
.shots figure{margin:0;background:#262a33}
.shots img{width:100%;display:block;border-bottom:4px solid var(--ink)}
.shots figcaption{background:#fff;padding:12px 14px;font-size:14px}
.shots a{cursor:zoom-in;display:block}
.lightbox{margin:auto;border:4px solid var(--ink);box-shadow:12px 12px 0 var(--ink);padding:0;background:#262a33;width:fit-content;max-width:96vw;max-height:94vh;overflow:hidden;cursor:zoom-out}
.lightbox::backdrop{background:rgba(18,18,18,.82)}
.lightbox img{display:block;width:auto;height:auto;max-width:calc(96vw - 8px);max-height:calc(94vh - 90px)}
.lb-cap{background:#fff;padding:12px 16px;font-size:15px;width:0;min-width:100%;box-sizing:border-box}
.lb-close{position:absolute;top:10px;right:10px;font:700 18px var(--fb);width:40px;height:40px;border:3px solid var(--ink);background:var(--c2);box-shadow:3px 3px 0 var(--ink);cursor:pointer}