/* Portfolio Ian Dorado — diseño "Fuera de serie" */
*{box-sizing:border-box}
body{margin:0;background:#e9e2d3;font-family:'Barlow',sans-serif;color:#1a171b}
a{color:inherit;text-decoration:none}
img{display:block}
@keyframes blink{50%{opacity:0}}
.wrap{max-width:1440px;margin:0 auto;background:#f6f1e6;min-height:100vh}

/* Top bar */
.topbar{position:sticky;top:0;z-index:40;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 44px;border-bottom:4px solid #191619;background:#f6f1e6}
.logo{display:flex;align-items:baseline;gap:10px}
.logo .nombre{font-family:'Anton',sans-serif;font-size:21px;letter-spacing:.02em}
.logo .dorsal{font-family:'Anton',sans-serif;font-size:15px;color:#e2551c}
.menu{display:flex;gap:26px;font-weight:700;font-size:13.5px;letter-spacing:.07em;text-transform:uppercase}
.menu a:hover{color:#e2551c}
.lang{display:flex;border:2px solid #191619;font-weight:800;font-size:12px}
.lang a,.lang span{padding:5px 10px}
.lang a:hover{background:#ece5d4}
.lang .on{background:#191619;color:#f6f1e6}

/* Piezas comunes */
.badge{display:inline-block;background:#191619;color:#f6f1e6;font-weight:800;font-size:12.5px;letter-spacing:.14em;padding:7px 15px;transform:skewX(-8deg);text-transform:uppercase}
.badge.naranja{background:#e2551c;color:#fff;font-size:12px;padding:6px 14px}
.badge.navy{background:#22304a;color:#fff;font-size:12px;padding:6px 14px}
.badge.claro{background:#f6f1e6;color:#191619;font-size:12px;padding:6px 14px}
.btn{background:#e2551c;color:#fff;font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:14px;padding:14px 26px;transform:skewX(-8deg);box-shadow:5px 5px 0 #191619;display:inline-block}
.btn:hover{background:#c4440e}
.btn.sombra-clara{box-shadow:5px 5px 0 rgba(246,241,230,.25);padding:15px 30px}
.btn-line{border:3px solid #191619;font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:14px;padding:12px 24px;transform:skewX(-8deg);display:inline-block}
.btn-line:hover{background:#191619;color:#f6f1e6}
.btn-line.claro{border-color:#f6f1e6;color:#f6f1e6;padding:12px 26px}
.btn-line.claro:hover{background:#f6f1e6;color:#191619}
.btns{display:flex;gap:18px;flex-wrap:wrap}

/* Hero home */
.hero{position:relative;overflow:hidden;padding:64px 44px 58px}
.hero-num{position:absolute;right:400px;top:-40px;font-family:'Anton',sans-serif;font-size:330px;line-height:1;color:transparent;-webkit-text-stroke:3px rgba(25,22,25,.13);pointer-events:none}
.dots{position:absolute;pointer-events:none;background-image:radial-gradient(rgba(25,22,25,.4) 1.2px,transparent 1.3px);background-size:8px 8px;opacity:.45}
.dots.bl{left:0;bottom:0;width:360px;height:190px;clip-path:polygon(0 100%,0 15%,100% 100%)}
.dots.claro{background-image:radial-gradient(rgba(246,241,230,.5) 1.2px,transparent 1.3px);opacity:.35}
.dots.tr{right:0;top:0;width:300px;height:160px;clip-path:polygon(100% 0,20% 0,100% 100%)}
.dots.br{right:0;bottom:0;width:320px;height:170px;clip-path:polygon(100% 100%,15% 100%,100% 0);opacity:.3}
.hero-grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.titulo{font-family:'Anton',sans-serif;font-size:95px;line-height:.99;margin:22px 0 20px;text-transform:uppercase;transform:skewX(-4deg);font-weight:400}
.titulo .rev{background:#e2551c;color:#f6f1e6;padding:0 16px;display:inline-block;margin-top:6px}
.lead{font-size:17px;line-height:1.6;max-width:58ch;margin:0 0 26px;color:#2c2830;scroll-margin-top:90px}
.lead2{font-size:16px;line-height:1.6;max-width:58ch;margin:0 0 26px;color:#4a4550}
.foto-wrap{position:relative;transform:rotate(-1.5deg);margin-right:26px}
.foto{width:100%;height:380px;object-fit:cover;border:4px solid #191619;box-shadow:12px 12px 0 #e2551c}
.foto-tag{position:absolute;left:-14px;bottom:-16px;background:#191619;color:#f6f1e6;font-family:'Anton',sans-serif;font-size:14px;letter-spacing:.1em;padding:7px 14px;transform:skewX(-8deg)}

/* Banda de sección oscura */
.banda{background:#191619;color:#f6f1e6;padding:18px 44px;display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;scroll-margin-top:70px}
.banda .tit{display:flex;align-items:baseline;gap:16px}
.banda h2{font-family:'Anton',sans-serif;font-size:32px;letter-spacing:.03em;margin:0;font-weight:400}
.banda .marca{color:#e2551c;font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.banda .sub{font-size:14px;color:#a8a099}

/* Cabecera de sección clara */
.sec-head{padding:8px 44px 6px;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;scroll-margin-top:80px}
.sec-head h2{font-family:'Anton',sans-serif;font-size:32px;letter-spacing:.03em;margin:0;font-weight:400}
.sec-head .sub{font-size:15px;color:#4a4550}

/* Experiencia */
.sets{padding:30px 44px 40px;display:grid;gap:16px}
.set{border:3px solid #191619;background:#fdfaf3;padding:18px 24px;display:grid;grid-template-columns:74px 1fr auto;gap:20px;align-items:start}
.set.live{border-left:12px solid #e2551c}
.snum{font-family:'Anton',sans-serif;font-size:42px;line-height:1;color:rgba(25,22,25,.16)}
.set-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.club{font-weight:900;text-transform:uppercase;font-size:19px;letter-spacing:.02em}
.rol{color:#e2551c;font-weight:800;font-size:13.5px;text-transform:uppercase;letter-spacing:.05em}
.chip-live{background:#e2551c;color:#fff;font-weight:800;font-size:11px;letter-spacing:.08em;padding:4px 10px;transform:skewX(-8deg)}
.chip-live .dot{animation:blink 1.2s steps(1) infinite}
.set p{margin:7px 0 0;font-size:15px;line-height:1.6;color:#4a4550}
.set .meta{text-align:right;font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:#6b6572;line-height:1.8}

/* Categorías de proyectos */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:22px 44px 42px}
.cat{border:3px solid #191619;background:#fdfaf3;box-shadow:8px 8px 0 rgba(25,22,25,.85);display:block}
.cat:hover{box-shadow:4px 4px 0 #e2551c}
.franja{height:10px}
.franja.f1{background:repeating-linear-gradient(45deg,#e2551c,#e2551c 10px,#191619 10px,#191619 20px)}
.franja.f2{background:#22304a}
.franja.f3{background:#191619}
.cat-head{padding:16px 18px 4px;display:flex;justify-content:space-between;align-items:center}
.cat-head .nom{font-family:'Anton',sans-serif;font-size:16px;letter-spacing:.05em;text-transform:uppercase}
.cat-head .num{font-family:'Anton',sans-serif;font-size:26px}
.cat p{padding:0 18px;margin:6px 0 0;font-size:14.5px;line-height:1.6;color:#4a4550}
.cat .ver{padding:14px 18px 16px;font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#e2551c}

/* Cinta de hitos */
.cinta{background:#e2551c;color:#fff;padding:14px 44px;display:flex;gap:34px;flex-wrap:wrap;font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.06em}
.cinta .sep{opacity:.55}

/* Habilidades */
.skills{display:grid;grid-template-columns:1fr 360px;gap:44px;padding:44px;align-items:start;scroll-margin-top:70px}
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.chip{background:#191619;color:#f6f1e6;font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.06em;padding:9px 16px;transform:skewX(-6deg)}
.skills .texto{margin:20px 0 0;font-size:15.5px;line-height:1.65;color:#4a4550;max-width:70ch}
.ficha{border:3px solid #191619;background:#fdfaf3;box-shadow:8px 8px 0 rgba(25,22,25,.85)}
.ficha-head{background:#191619;color:#f6f1e6;font-family:'Anton',sans-serif;font-size:14px;letter-spacing:.1em;padding:10px 16px;display:flex;justify-content:space-between}
.ficha-head .dorsal{color:#e2551c}
.ficha-body{padding:8px 16px 14px}
.ficha-row{display:flex;justify-content:space-between;gap:12px;border-bottom:2px dotted #cbc2ae;padding:10px 2px;font-size:14.5px;align-items:baseline}
.ficha-row:last-child{border-bottom:0}
.ficha-row .k{font-weight:800;font-size:11.5px;letter-spacing:.1em;color:#8b8391}

/* Contacto */
.contacto{position:relative;overflow:hidden;background:#191619;color:#f6f1e6;padding:64px 44px;text-align:center;scroll-margin-top:70px}
.contacto h2{font-family:'Anton',sans-serif;font-size:46px;letter-spacing:.02em;margin:0 0 10px;text-transform:uppercase;font-weight:400}
.contacto .acc{color:#e2551c}
.contacto p{margin:0 0 26px;font-size:17px;color:#cfc8bd}
.contacto.cierre{padding:54px 44px}
.contacto.cierre h2{font-size:40px;margin-bottom:12px}
.contacto.cierre p{margin:0 auto 26px;font-size:16px;max-width:66ch}
.contacto .btns{justify-content:center}

/* Footer */
.footer{padding:16px 44px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-top:3px solid #191619}
.footer .copy{font-size:13.5px;color:#6b6572}
.footer .links{display:flex;gap:20px;font-weight:800;font-size:12px;letter-spacing:.07em;text-transform:uppercase}
.footer .links a:hover{color:#e2551c}
.footer .idiomas{color:#9b93a0}

/* Interiores */
.hero-int{background:#191619;color:#f6f1e6;padding:52px 44px 44px;position:relative;overflow:hidden}
.hero-int h1{font-family:'Anton',sans-serif;font-size:64px;line-height:1;margin:18px 0 12px;text-transform:uppercase;font-weight:400}
.hero-int p{margin:0;font-size:17px;color:#cfc8bd;max-width:70ch}
.hero-int a{color:#e2551c;font-weight:700;text-decoration:underline}
.volver{font-weight:800;font-size:13px;letter-spacing:.07em;text-transform:uppercase}
.volver:hover{color:#e2551c}
.grupo{padding:40px 44px 8px;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.grupo+.grupo,.grupo.sig{padding-top:26px}
.grupo h2{font-family:'Anton',sans-serif;font-size:28px;letter-spacing:.03em;margin:0;font-weight:400}
.grupo .meta{font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:#6b6572}
.projs{padding:18px 44px 10px;display:grid;gap:22px}
.projs.fin{padding-bottom:44px}
.proj{border:3px solid #191619;background:#fdfaf3;box-shadow:8px 8px 0 rgba(25,22,25,.85);display:grid;grid-template-columns:300px 1fr}
.captura{border-right:3px solid #191619;background:repeating-linear-gradient(45deg,#ece5d4,#ece5d4 12px,#ddd3bc 12px,#ddd3bc 24px);display:flex;align-items:center;justify-content:center;min-height:190px}
.captura span{font-family:'JetBrains Mono',monospace;font-size:12px;color:#4a4550;background:#f6f1e6;border:2px solid #191619;padding:6px 10px}
.proj-body{padding:18px 22px}
.proj-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap}
.proj-head .pnom{font-family:'Anton',sans-serif;font-size:22px;letter-spacing:.03em}
.proj-head .ptech{font-weight:700;font-size:12.5px;color:#6b6572;text-transform:uppercase}
.prol{color:#e2551c;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.05em;margin-top:4px}
.proj-body p{margin:10px 0 12px;font-size:15px;line-height:1.6;color:#4a4550}
.proj-body p:last-child{margin-bottom:0}
.premios{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.premio{border:2px solid #e2551c;color:#c4440e;font-weight:800;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;transform:skewX(-6deg)}
.plinks{display:flex;gap:18px;flex-wrap:wrap;font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.plinks a{color:#e2551c}
.plinks a:hover{color:#191619}
.jams{padding:18px 44px 10px;display:grid;grid-template-columns:1fr 1fr;gap:22px}
.jam{border:3px solid #191619;background:#fdfaf3;box-shadow:8px 8px 0 rgba(25,22,25,.85);padding:18px 22px}
.jam-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.jam .pnom{font-family:'Anton',sans-serif;font-size:20px;letter-spacing:.03em}
.jam .premio-chip{background:#e2551c;color:#fff;font-weight:800;font-size:11.5px;letter-spacing:.06em;padding:5px 11px;transform:skewX(-8deg);text-transform:uppercase}
.jam .meta{font-weight:700;font-size:12.5px;color:#6b6572;text-transform:uppercase;margin-top:4px}
.jam p{margin:10px 0 12px;font-size:15px;line-height:1.6;color:#4a4550}
.duo{padding:18px 44px 44px;display:grid;grid-template-columns:1fr 1fr;gap:22px}
.vcard{border:3px solid #191619;background:#fdfaf3;box-shadow:8px 8px 0 rgba(25,22,25,.85)}
.vcard .captura{border-right:0;border-bottom:3px solid #191619;height:150px;min-height:0}
.vcard .pnom{font-family:'Anton',sans-serif;font-size:19px;letter-spacing:.03em}
.vcard .meta{font-weight:700;font-size:12.5px;color:#6b6572;text-transform:uppercase;margin-top:4px}
.vcard p{margin:10px 0 12px;font-size:15px;line-height:1.6;color:#4a4550}
.vcard .proj-body p:last-child{margin-bottom:0}

/* Responsive */
@media (max-width:980px){
.topbar{padding:12px 20px}
.menu{gap:16px}
.hero{padding:44px 20px}
.hero-num{display:none}
.hero-grid{grid-template-columns:1fr;gap:32px}
.titulo{font-size:60px}
.foto-wrap{margin-right:0}
.banda,.sec-head,.sets,.cats,.cinta,.skills,.contacto,.footer,.hero-int,.grupo,.projs,.jams,.duo{padding-left:20px;padding-right:20px}
.cats{grid-template-columns:1fr}
.skills{grid-template-columns:1fr}
.set{grid-template-columns:1fr}
.snum{display:none}
.set .meta{text-align:left}
.proj{grid-template-columns:1fr}
.captura{border-right:0;border-bottom:3px solid #191619;min-height:150px}
.jams,.duo{grid-template-columns:1fr}
.hero-int h1{font-size:44px}
.contacto h2{font-size:34px}
}