
:root{--bg:#f7f7f5;--ink:#171717;--muted:#666666;--lime:#eeeeea;--line:#dcdcd8}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,sans-serif}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid #555555;outline-offset:5px}.wrap{max-width:1200px;margin:auto;padding:0 6%}nav{display:flex;justify-content:space-between;align-items:center;height:95px;border-bottom:1px solid var(--line)}.brand{font-size:25px;font-weight:800;letter-spacing:-1px}.brand small{display:block;font-size:10px;letter-spacing:3.5px;font-weight:400;margin-top:5px}.brand b{color:#171717}.links{display:flex;gap:30px;font-size:13px}.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center;padding:80px 0 70px}.eyebrow{text-transform:uppercase;letter-spacing:2px;font-size:10px;font-weight:bold}h1{font-size:clamp(45px,5vw,68px);line-height:1.08;letter-spacing:-3px;font-weight:500;margin:26px 0}h1 em{font-style:normal;color:#777777}p{color:var(--muted);font-size:15px;line-height:1.8}.hero p{max-width:430px}.actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:28px}.btn{display:inline-block;background:var(--ink);color:white;padding:17px 23px;border-radius:5px;font-size:13px}.text-link{font-size:13px;display:inline-block;border-bottom:1px solid #999999;padding:9px 0}.visual{min-height:410px;border-radius:12px;background-color:#e8e8e5;background-image:linear-gradient(#cececa60 1px,transparent 1px),linear-gradient(90deg,#cececa60 1px,transparent 1px);background-size:30px 30px;display:flex;align-items:center;justify-content:center;padding:30px;position:relative;overflow:hidden}.circle{position:absolute;width:330px;height:330px;border:1px solid #bdbdb7;border-radius:50%}.code{background:#171717;color:#c7c7c3;border:1px solid #3a3a38;border-radius:10px;box-shadow:0 25px 45px #00000025;transform:rotate(-3deg);width:100%;max-width:375px}.code-top{padding:16px;border-bottom:1px solid #3d3d39;font:10px monospace;display:flex;justify-content:space-between}.code pre{font:12px/2.2 monospace;margin:0;padding:23px;white-space:pre-wrap}.code b{color:var(--lime);font-weight:400}.float{position:absolute;bottom:28px;right:12px;background:#fafaf8;border:1px solid #cececa;border-radius:6px;padding:16px;font-size:11px;transform:rotate(2deg)}.float b{color:#171717;margin-right:8px}.strip{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:23px 0;font:10px monospace;color:var(--muted)}section{padding:80px 0}.heading{display:flex;align-items:end;justify-content:space-between;gap:50px;margin-bottom:35px}h2{font-size:clamp(30px,3.5vw,42px);font-weight:500;line-height:1.2;letter-spacing:-1.5px;margin:17px 0 0}.heading p{max-width:360px;font-size:14px;margin:0}.services{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.service{border-top:1px solid #b3b3ad;padding-top:25px}.num{font:11px monospace;color:#777777}.service h3{font-size:20px;font-weight:500;margin-top:25px}.service p{font-size:14px}.tags{font-size:9px;letter-spacing:1px;color:var(--muted);margin-top:22px}.portfolio{background:#141414;color:#f7f7f5}.portfolio p{color:#b8b8b2}.portfolio .eyebrow{color:var(--lime)}.projects{display:grid;grid-template-columns:1.15fr 1fr;gap:25px}.project{border:1px solid #3d3d38;border-radius:8px;overflow:hidden}.project-art{height:250px;background:#deded8;color:#232323;position:relative;overflow:hidden;padding:32px}.raven{font-size:43px;letter-spacing:-2px;font-weight:bold}.raven small{display:block;letter-spacing:1px;font-size:9px;font-weight:400;margin-top:7px}.arrow{position:absolute;right:30px;top:30px;font-size:85px}.modules{position:absolute;bottom:30px;left:30px;right:20px;display:flex;gap:10px;flex-wrap:wrap}.modules span{font-size:11px;padding:12px;background:#ffffffa6;border-radius:5px}.jinsei{background:#e9e8e4;color:#4f4f4b;display:flex;align-items:center;justify-content:center}.jinsei:before{content:'';position:absolute;width:260px;height:260px;border:1px solid #c8c8c1;border-radius:50%;right:-110px;top:-125px}.jinsei strong{font:60px Georgia,serif;letter-spacing:3px}.jinsei small{display:block;text-align:center;letter-spacing:5px;font:10px Arial,sans-serif;margin-top:12px}.project-body{padding:27px}.project-body h3{font-size:23px;font-weight:500;margin:0}.project-body p{font-size:14px;min-height:76px}.project-body a{color:var(--lime)}.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:75px}.about p:first-child{margin-top:0}.principles{display:flex;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:22px;font-size:12px}.contact{background:#e8e8e3;border-radius:10px;padding:45px;display:flex;align-items:center;justify-content:space-between;gap:35px;margin-bottom:70px}.contact p{font-size:14px}.contact-actions{display:grid;gap:14px;text-align:center;min-width:220px}.contact .btn{background:var(--lime);color:var(--ink)}footer{border-top:1px solid var(--line);padding:30px 0}.foot{display:flex;justify-content:space-between;align-items:center;gap:25px}.foot p{font-size:11px}a:hover{opacity:.75}@media(max-width:700px){nav{height:80px}.links{gap:15px;font-size:12px}.links a:nth-child(3){display:none}.brand{font-size:21px}.hero{grid-template-columns:1fr;gap:35px;padding:45px 0}h1{font-size:48px;letter-spacing:-2px}.visual{min-height:340px}.code pre{font-size:11px;padding:20px}.heading{display:block}.heading p{margin-top:20px}.services,.projects,.about{grid-template-columns:1fr;gap:30px}section{padding:55px 0}.contact{display:block;padding:28px;margin-bottom:45px}.contact-actions{margin-top:25px}.foot{flex-direction:column;align-items:start;gap:8px}.foot p{margin:5px 0}.project-body p{min-height:0}.strip span{flex-basis:44%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* Identidad visual basada en el logo original: negro y fondos neutros. */
.brand{display:block;line-height:0;flex-shrink:0}
.brand img{display:block;width:220px;height:auto;max-width:100%}
nav{height:112px}
h1,h2,h3{color:inherit}
h1{font-weight:600;letter-spacing:-3px}
.eyebrow{letter-spacing:2.2px}
.btn{background:#171717;color:#fff;border:1px solid #171717;transition:background .2s,color .2s}
.btn:hover{background:#383838;opacity:1}
.visual{border:1px solid #d9d9d3}
.contact .btn{background:#171717;color:#fff}
.contact .btn:hover{background:#383838}
.portfolio .eyebrow,.project-body a{color:#eeeeea}
.project-art{background:#deded8;color:#232323}
.jinsei{background:#e9e8e4;color:#4f4f4b}
.foot .brand img{width:190px}
@media(max-width:700px){nav{height:96px;gap:15px}.brand img{width:165px}.links{gap:12px}.links a{font-size:11px}.links a:last-child{display:none}h1{letter-spacing:-2px}.foot .brand img{width:175px}}
@media(max-width:360px){.brand img{width:145px}.links{gap:10px}}
@media(prefers-reduced-motion:reduce){.btn{transition:none}}

/* Los proyectos conservan su identidad propia dentro del portafolio. */
.project-art.tico-preview{background:linear-gradient(135deg,#eef7ff,#f6fcf4);display:flex;align-items:center;justify-content:center;padding:16px 25px 69px;border-bottom:1px solid #d2e6f2}
.tico-project-logo{display:block;width:auto;height:170px;max-width:80%;object-fit:contain}
.tico-preview .modules{bottom:17px;left:15px;right:15px;justify-content:center;gap:8px}
.tico-preview .modules span{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid #d6e3ef;color:#072b60;font-size:10px;padding:9px 11px;box-shadow:0 3px 10px #072b6009}
.tico-preview .modules img{object-fit:contain}
@media(max-width:360px){.tico-preview .modules span{font-size:9px;padding:8px}.tico-project-logo{height:155px}}

/* Identidad original de Jinsei: logo dorado y turquesa sobre blanco. */
.project-art.jinsei-preview{background:#fff;padding:0;display:flex;align-items:center;justify-content:center;border-bottom:3px solid #258d9a}
.jinsei-preview:before,.jinsei-preview:after{display:none}
.jinsei-project-logo{display:block;width:100%;height:100%;object-fit:contain}
