/* Nexo · portada de proyectos. Comparte el sistema de landing.css (fondo, nav, botones, tarjetas); aquí solo lo propio de proyectos y contacto. */
.nx-hero .hero-visual{grid-template-rows:auto}
.hero-visual .nx-tilt{width:min(560px,94vw)}
.browser{margin:0;border-radius:18px;overflow:hidden;background:#0b1019;border:1px solid var(--line);box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03) inset}
.browser figcaption{display:flex;align-items:center;gap:6px;padding:10px 14px;background:rgba(148,163,184,.08);border-bottom:1px solid var(--line);font:500 12.5px 'DM Sans',Arial;color:#8ea0b8}
.browser figcaption i{width:10px;height:10px;border-radius:50%;background:#ff5f57}.browser figcaption i:nth-child(2){background:#febc2e}.browser figcaption i:nth-child(3){background:#28c840}
.browser figcaption span{margin-left:10px;padding:4px 12px;border-radius:999px;background:rgba(5,7,13,.6);flex:1;text-align:center}
.browser img{display:block;width:100%;height:auto;aspect-ratio:799/609;object-fit:cover;object-position:top}
.nx-hero .chip-a{top:-26px;left:-18px}.nx-hero .chip-b{right:-8px;top:30%}.nx-hero .chip-c{bottom:-30px;left:10%}
.float-chip b{color:#a9f0e2;font:800 15px Manrope,Arial}
/* Numbers */
.nx-counters{max-width:1180px;margin:0 auto;padding:10px 16px 20px}
/* Projects */
.projects{max-width:1180px;margin:0 auto;padding:70px 16px 30px}
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.project{position:relative;display:flex;flex-direction:column;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(14px);overflow:hidden;transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s,box-shadow .25s}
.project:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--tone) 55%,transparent);box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 40px color-mix(in srgb,var(--tone) 12%,transparent)}
.project-media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#0b1019;border-bottom:1px solid var(--line)}
.project-media img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}.project:hover .project-media img{transform:scale(1.04)}
.project-kind{position:absolute;left:12px;bottom:12px;padding:6px 10px;border-radius:999px;background:rgba(5,7,13,.78);border:1px solid var(--line);font:600 11.5px 'DM Sans',Arial;letter-spacing:.06em;text-transform:uppercase;color:#c3cddb;backdrop-filter:blur(8px)}
.poster{height:100%;display:grid;place-content:center;text-align:center;gap:6px;background:radial-gradient(420px 220px at 20% 0%,color-mix(in srgb,var(--tone) 35%,transparent),transparent 60%),linear-gradient(160deg,#0f1a2e,#0a1120 60%,#0c1526)}
.poster-ini{font:800 54px/1 Manrope,Arial;letter-spacing:-2px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.poster-title{font:700 16px Manrope,Arial;color:#eef2f7}.poster-sub{font:500 12.5px 'DM Sans',Arial;letter-spacing:.12em;text-transform:uppercase;color:#8ea0b8}
.project-body{display:flex;flex-direction:column;gap:12px;padding:20px 22px 22px;flex:1}
.project-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.project-top h3{font:800 20px Manrope,Arial;margin:0;letter-spacing:-.3px}
.live{display:inline-flex;align-items:center;gap:4px;font:600 12px 'DM Sans',Arial;color:#a9f0e2;white-space:nowrap}.live .pulse{margin-right:4px;width:8px;height:8px}.live.soon{color:#f6c66b}.live.soon .pulse{background:#f6c66b}
.project-body p{color:#c3cddb;margin:0;font-size:15px}
.project-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0}.project-tags span{font:600 12px 'DM Sans',Arial;padding:5px 9px;border-radius:8px;background:color-mix(in srgb,var(--tone) 14%,transparent);color:#eef2f7;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone) 35%,transparent)}
.project-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:6px}.project-links .btn{padding:10px 14px;font-size:14px}
/* Contact */
.contact{max-width:1180px;margin:0 auto;padding:60px 16px 20px}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.contact-card{display:grid;gap:4px;padding:24px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(14px);position:relative;overflow:hidden;transition:transform .22s,border-color .22s,box-shadow .22s}
.contact-card::before{content:'';position:absolute;inset:0;background:radial-gradient(360px 140px at 0% 0%,color-mix(in srgb,var(--tone) 22%,transparent),transparent 65%);opacity:.8}
.contact-card>*{position:relative}.contact-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--tone) 60%,transparent);box-shadow:0 20px 50px rgba(0,0,0,.45)}
.contact-icon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:22px;background:color-mix(in srgb,var(--tone) 18%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone) 50%,transparent);margin-bottom:10px}
.contact-card strong{font:800 18px Manrope,Arial;letter-spacing:-.3px}.contact-card span:not(.contact-icon){font:600 15px 'DM Sans',Arial;color:#eef2f7}.contact-card small{color:var(--muted);font-size:13px}
/* Responsive */
@media(max-width:1000px){.project-grid,.contact-grid{grid-template-columns:1fr 1fr}.hero-visual .nx-tilt{width:min(560px,92vw)}.nx-hero .chip-b{right:-6px}.nx-hero .chip-a{left:-6px}}
@media(max-width:700px){.project-grid,.contact-grid{grid-template-columns:1fr}.nx-hero .chip-b{display:none}.nx-hero .chip-c{bottom:-22px;left:6%}.project-media{aspect-ratio:16/9}}
/* Four services in one row on wide screens */
#servicios .module-grid{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){#servicios .module-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){#servicios .module-grid{grid-template-columns:1fr}}

/* Hero composition: a generic site, a bot message and a brand card. Nothing here is a client's project. */
.studio{position:relative;width:100%;aspect-ratio:560/430}
.mock-site{position:absolute;inset:0 8% 10% 0;display:flex;flex-direction:column}
.browser-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:rgba(148,163,184,.08);border-bottom:1px solid var(--line);font:500 12.5px 'DM Sans',Arial;color:#8ea0b8}
.browser-bar i{width:10px;height:10px;border-radius:50%;background:#ff5f57}.browser-bar i:nth-child(2){background:#febc2e}.browser-bar i:nth-child(3){background:#28c840}
.browser-bar span{margin-left:10px;padding:4px 12px;border-radius:999px;background:rgba(5,7,13,.6);flex:1;text-align:center}
.mock-body{flex:1;padding:16px 18px;display:grid;grid-template-rows:auto 1fr auto;gap:14px;background:linear-gradient(160deg,#0d1422,#0a0f1b)}
.mock-nav{display:flex;align-items:center;gap:10px}.mock-nav b{width:22px;height:22px;border-radius:7px;background:var(--grad)}.mock-nav u{width:34px;height:6px;border-radius:3px;background:rgba(148,163,184,.25);text-decoration:none}.mock-nav em{margin-left:auto;width:58px;height:18px;border-radius:999px;background:rgba(238,242,247,.9)}
.mock-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;align-items:center}.mock-hero>div{display:grid;gap:7px}
.mock-eyebrow{width:38%;height:6px;border-radius:3px;background:rgba(104,222,198,.6)}.mock-h1{width:92%;height:13px;border-radius:5px;background:rgba(238,242,247,.92)}.mock-h1.short{width:64%;background:var(--grad)}.mock-p{width:85%;height:6px;border-radius:3px;background:rgba(148,163,184,.3)}.mock-p+.mock-p{width:70%}.mock-btn{margin-top:4px;width:40%;height:18px;border-radius:7px;background:rgba(238,242,247,.92)}
.mock-art{height:100%;min-height:90px;border-radius:12px;background:radial-gradient(60% 60% at 70% 30%,rgba(104,222,198,.45),transparent 70%),radial-gradient(50% 60% at 20% 80%,rgba(139,108,255,.45),transparent 70%),linear-gradient(160deg,#121c30,#0e1626);border:1px solid var(--line)}
.mock-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.mock-cards i{height:36px;border-radius:9px;background:rgba(148,163,184,.1);border:1px solid var(--line)}
.mock-discord{position:absolute;right:-4%;bottom:0;width:62%;display:flex;gap:10px;padding:12px 14px;border-radius:14px;background:#2b2d31;border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 70px rgba(0,0,0,.6);transform:translateZ(60px);color:#dbdee1;font:400 12.5px 'DM Sans',Arial}
.mock-avatar img{display:block;width:34px;height:34px;border-radius:50%}.mock-author{font-weight:600;color:#fff;display:flex;align-items:center;gap:6px}.mock-author span{font:700 9.5px 'DM Sans',Arial;padding:1px 5px;border-radius:4px;background:#5865f2;color:#fff}.mock-author small{font-weight:400;color:#949ba4;font-size:11px}
.mock-text{margin-top:3px}.mock-text b{color:#fff}.mock-embed{margin-top:8px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;padding:8px 10px;border-left:3px solid #68dec6;border-radius:4px;background:#1e1f22}.mock-embed i{height:8px;border-radius:3px;background:rgba(255,255,255,.14)}
.mock-brand{position:absolute;left:-5%;bottom:14%;padding:12px 14px;border-radius:14px;background:rgba(14,19,29,.92);border:1px solid var(--line);box-shadow:var(--glow);display:grid;gap:8px;transform:translateZ(50px)}
.mock-label{font:700 10px 'DM Sans',Arial;letter-spacing:.16em;color:#8ea0b8}.swatches{display:flex;gap:6px}.swatches i{width:18px;height:18px;border-radius:6px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}.mock-font{font:800 18px Manrope,Arial;color:#eef2f7;display:flex;align-items:baseline;gap:8px}.mock-font small{font:500 11px 'DM Sans',Arial;color:#8ea0b8}
.nx-hero .chip-b{right:-6px;top:14%}.nx-hero .chip-c{bottom:-14px;left:2%}
@media(max-width:700px){.mock-discord{width:72%;font-size:11.5px}.mock-brand{display:none}.nx-hero .chip-c{left:4%}}