/* AE / Carbon, porcelain and brushed silver. */
:root{--bg:#090a0b;--card:#111214;--ink:#f0f0ed;--muted:#a2a3a6;--line:#2b2d30;--accent:#c7cbd0;--fast:200ms;--normal:600ms;--cinematic:1200ms;--ease:cubic-bezier(.16,1,.3,1);background:var(--bg);color:var(--ink)}
body{background:var(--bg)}body:before{opacity:.018}::selection{background:#c7cbd0;color:#090a0b}
html.lenis,html.lenis body{height:auto}html.lenis{scroll-behavior:auto}.case-open{overflow:hidden}.reveal{opacity:1;transform:none}
.monogram span{color:#86aca3}.primary{background:#e4e5e4;color:#111214}.primary:hover{background:#fff}.button{border-radius:2px!important;transition:background var(--fast),color var(--fast),transform var(--normal)}
.button span,.text-link span,.nav-cta span,.service>a span{display:inline-block;transition:transform .4s var(--ease)}.button:hover span,.text-link:hover span,.nav-cta:hover span{transform:translate(3px,-3px)}
.button:active{scale:.98}.nav-cta{border-color:#56585d!important}.header{transition:transform .55s var(--ease),background .4s,padding .4s}.header.scrolled{padding-block:14px;background:#101113f2;border-color:#303237}.header.nav-hidden{transform:translateY(-135%)}.header:focus-within{transform:translateY(0)}.header nav a{position:relative}.header nav a:after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:#c7cbd0;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}.header nav a:hover:after{transform:scaleX(1)}
.hero:before{background:radial-gradient(ellipse at 77% 40%,#24272d70,transparent 53%)}.hero:after{display:none}.hero h1{font-size:clamp(54px,5.55vw,82px);letter-spacing:-4px;line-height:1.07}.hero h1>span{color:#d3d5d8;font-family:Georgia,serif;font-style:italic;letter-spacing:-3.5px}.hero h1>span.word-mask{font-family:inherit;font-style:normal;color:inherit}.hero h1>span:not(.word-mask) .word-mask{font-family:Georgia,serif;font-style:italic}.hero .hero-copy{font-size:16px;line-height:1.8;color:#a8aaaf;max-width:425px}.hero .hero-label{font-size:11px;line-height:1.7;color:#a7aaaf;letter-spacing:1.6px;max-width:460px}.hero .availability{color:#b0b3b6;font-size:12px}.availability i{background:#86aca3;box-shadow:none;animation:none!important}.hero .button{font-size:14px}.hero .secondary{border-bottom-color:#6a6d72}.hero-bottom{border-color:#303237}.hero-edition{display:none}.hero .social-inline{font-size:13px}.hero .location{font-size:11px}.hero .location span{font-size:10px;color:#898c92}
.sculpture-stage{right:-10px;width:54%;top:155px;height:550px}.sculpture-meta{border-color:#4c5057;left:15%;right:15%;font-size:10px;color:#a5aab2}.sculpture-meta strong,.sculpture-meta span:last-child{color:#949aa4}.sculpture-fallback{font-size:88px;letter-spacing:-9px;transform:rotate(-12deg);text-shadow:none;color:#b4bac4;isolation:isolate}.sculpture-fallback>span{border:1px solid #616771;padding:25px}.sculpture-fallback i{position:absolute;width:68%;height:58%;border:1px solid #424750;transform:translate(15px,10px);z-index:-1}.sculpture-fallback i:nth-of-type(2){transform:translate(-15px,-10px)}.sculpture-fallback i:nth-of-type(3){transform:translate(-35px,-30px)}
.expertise-strip{background:transparent;border-block:1px solid #303237}.expertise-strip .wrap{color:#a2a5aa;font-size:11px;letter-spacing:1.4px;padding-block:26px}.expertise-strip b{color:#62666d}
.word-mask{display:inline-block;overflow:clip;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}.word-reveal{display:inline-block}.eyebrow{font-size:12px;letter-spacing:1.5px;color:#91969e}h2 em{color:#bdc1c8}h2{font-size:clamp(38px,4.1vw,60px)}.section{background:transparent;border-color:#292c30}.small-cross{color:#acb1b8}
.services{border-color:#3c4046}.service{position:relative;border-color:#2d3035;isolation:isolate;padding-block:40px;min-height:170px}.service h3{font-size:28px}.service p{font-size:16px;line-height:1.8;color:#a2a6ac}.service .tags{gap:12px}.tags li{font-size:12px;color:#91979f;line-height:1.7}.service-top>span:last-child{color:#a4abb5}.service>a span{color:#d0d4da}.service:hover,.service.service-active{background:#ffffff03}.service.service-active h3{color:#fff;translate:5px 0}.service h3{transition:translate .6s var(--ease),color .4s}.service-signal{position:absolute;right:12%;bottom:25px;display:flex;align-items:center;gap:4px;opacity:0;transition:opacity .6s;pointer-events:none}.service-active .service-signal{opacity:.65}.service-signal i{width:18px;height:2px;background:#adb5c2;transition:transform .6s var(--ease)}.service:nth-child(1) .service-signal i{height:14px;background:none;border:1px solid #aab2bf}.service:nth-child(2) .service-signal i:nth-child(even){transform:translateY(-8px)}.service:nth-child(3) .service-signal{transform:rotate(-25deg)}.service:nth-child(4) .service-signal i{transform:rotate(90deg)}
.projects-section{background:transparent;border:0}.projects-section>.wrap{border-top:1px solid #373b41;padding-top:65px}.project-pair{display:contents}.project,.project.featured,.project.compact{display:grid;grid-template-columns:1.3fr 1fr;gap:65px;align-items:center;min-height:78svh;padding-block:60px;border-bottom:1px solid #2e3136;overflow:visible}.project-visual{position:relative;min-height:480px!important;height:520px;transform-style:preserve-3d;transform:perspective(1400px);will-change:auto;border:1px solid #373c45!important;background:radial-gradient(ellipse at 50% 10%,#333940,#121518 75%)!important;border-radius:3px;box-shadow:0 30px 60px -35px #000}.project-info,.compact .project-info{padding:0}.project-info h3,.compact .project-info h3{font-size:clamp(29px,2.7vw,42px);line-height:1.15;letter-spacing:-1.4px}.project-info p{font-size:16px;line-height:1.8}.project-info dt{font-size:11px;color:#a2a9b3}.project-info dd{font-size:14px}.project-info dl>div{border-color:#363b42}.project-info .text-link{font-size:14px;margin-top:20px;border-bottom:1px solid #636b76;padding-bottom:8px}.concept-label{font-size:10px;letter-spacing:1.5px;color:#a5acb6;z-index:3}.education{padding:70px 28px 35px;display:flex;justify-content:center}.browser-chrome{height:30px;background:#24282f;border:1px solid #555c66;border-bottom:0;border-radius:6px 6px 0 0;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:9px;color:#c0c5cd;transform:perspective(1100px) rotateY(-7deg);transform-origin:bottom}.browser-chrome>span:first-child{color:#777f8b;font-size:8px;letter-spacing:2px}.dashboard{background:#161a20;border-color:#555c66;border-radius:0 0 6px 6px;transform:perspective(1100px) rotateY(-7deg)!important;transform-origin:top;box-shadow:0 30px 60px #0006;animation:none!important;min-height:280px}.dash-side{border-color:#333942;color:#a1a9b5}.dash-side b{color:#e1e5ea}.dash-side b span,.dash-active{color:#b3becf}.dash-content>p,.dash-top,.dash-side small{color:#b0b8c5}.dash-top>span,.course{background:#272e38;color:#d0d8e5;border-color:#4c5665}.course-art{color:#b7c3d5}.course small,.course>span,.dash-side strong{color:#c4ccd7}.progress-track{background:#48505d}.progress-track i{background:#abb9cf}.course h5{font-size:12px}.course small{font-size:8px}.dash-content>p{font-size:10px}.dash-side{font-size:10px}.dash-top{font-size:10px}
.automation{align-items:center;overflow:hidden}.phone-frame{width:232px;min-height:385px;padding:22px 17px;border:5px solid #565d68;border-radius:32px;background:linear-gradient(145deg,#1d232c,#0e1218);box-shadow:24px 28px 50px #0007;transform:perspective(1100px) rotateY(-13deg) rotateZ(5deg);margin-top:10px}.phone-notch{width:55px;height:9px;background:#080a0d;border-radius:8px;margin:0 auto 27px}.phone-title{color:#eef0f4;font-size:16px;line-height:1.3}.phone-title span{display:block;color:#9ca6b5;font-size:10px;margin-top:8px}.phone-frame .flow-diagram{flex-direction:column;padding:22px 0 0;gap:0}.phone-frame .flow-node{flex-direction:row;width:100%;min-height:47px;gap:14px;border-radius:6px;background:#262e39;border-color:#4a5565;font-size:11px}.phone-frame .flow-node>span{font-size:20px;color:#c0cad9}.phone-frame .flow-connector{width:1px;height:20px;background:#7d8c9f}.phone-frame .flow-connector:after{right:-1.5px;top:8px;background:#b3c1d4}.ai-node{box-shadow:none;border-color:#8996aa!important}.flow-caption,.system-caption{font-size:9px;color:#a4adba;letter-spacing:1px}.system-logo{font-size:110px;color:#d0d5df;text-shadow:2px 3px #56606f,7px 9px #10141b;transform:perspective(800px) rotateY(-15deg);animation:none!important}.system-logo>span{font-size:13px}.ae-system:before{content:'';position:absolute;inset:70px;border:1px solid #4b5667;transform:perspective(800px) rotateY(-15deg) rotateZ(-9deg);pointer-events:none}
.about{align-items:center}.about-identity{background:transparent;border-block:1px solid #41454b;aspect-ratio:1;overflow:hidden;padding:32px 0}.identity-mark{font-family:inherit;font-style:normal;color:#dfe1e4;letter-spacing:-5px;font-size:clamp(58px,6.3vw,92px);line-height:.98;display:block;align-content:center;font-weight:500;text-shadow:none}.identity-mark>span{display:block;margin:30px 0 0;font:10px 'Courier New',monospace;letter-spacing:2px;color:#929aa6}.identity-bottom{color:#a8afb9;border-color:#41464e;font-size:10px}.social-card{border-color:#41464f}.social-card h3{color:#e1e4e9}.social-card .network-action,.network-icon{color:#b0b8c5}.social-card p{color:#a2a7b0}
.contact{background:linear-gradient(180deg,transparent,#14161a);border-color:#343940;padding-bottom:115px}.contact h2{font-size:clamp(42px,4.6vw,68px);line-height:1.05}.contact h2 em{color:#d7dbe2}.contact .contact-grid{gap:65px}.contact-email{font-size:18px}.contact-form{border-color:#40464e}.contact-form input,.contact-form textarea{background:transparent;border-color:#58616d;color:#e8eaee;font-size:15px}.contact-form input:focus,.contact-form textarea:focus{border-color:#ced6e2;box-shadow:0 3px 0 #ffffff09;background:#ffffff02}.contact-form label{font-size:14px}.contact .form-note{font-size:12px;color:#a6aeb9}.contact .form-status{color:#ccd3dc}.footer:after{color:#ffffff04}.footer:hover:after{color:#ffffff08}.footer{border-top:1px solid #353b43}
.editorial-cursor{position:fixed;left:0;top:0;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border:1px solid #d8dee6;background:#d8dee64d;border-radius:50%;z-index:80;pointer-events:none;opacity:0;display:grid;place-items:center;font-size:10px;color:#111;transition:width .25s,height .25s,margin .25s,background .25s,opacity .2s;backdrop-filter:none}.editorial-cursor.shown{opacity:.7}.editorial-cursor.link{width:25px;height:25px;margin:-12.5px 0 0 -12.5px;background:transparent}.editorial-cursor.view{width:65px;height:65px;margin:-32.5px 0 0 -32.5px;background:#e8ebef;opacity:.95;letter-spacing:1px}.is-interactive{cursor:pointer}.case-open .editorial-cursor{display:none}
#project-dialog{position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100svh;max-height:none;border:0;border-radius:0;background:#101216;padding:70px max(40px,calc((100vw - 1150px)/2));overflow-y:auto;overscroll-behavior:contain}#project-dialog::backdrop{background:#050609e8}#project-dialog>h2{font-size:clamp(38px,5vw,68px);max-width:900px;margin-bottom:40px}.dialog-close{position:fixed;top:22px;right:30px;z-index:5;background:#20252d;border:1px solid #5a6573;border-radius:50%;width:44px;height:44px}.case-poster{margin-bottom:50px}.case-poster .project-visual{max-width:800px;margin:auto;min-height:330px!important;height:370px;pointer-events:none;transform:none!important}.case-poster .phone-frame{scale:.75;margin-top:-10px}.case-poster .dashboard{max-width:500px;margin:0 auto}.case-poster .browser-chrome{max-width:500px;width:100%;margin:auto auto 0}#dialog-content{display:grid;grid-template-columns:1fr 1fr;gap:35px 65px}#dialog-content section{border-top:1px solid #414955;padding-top:18px}#dialog-content h3{font-size:12px;text-transform:uppercase;letter-spacing:2px;color:#bdc6d4}#dialog-content p{font-size:16px;color:#b8c0cb;line-height:1.8}#dialog-contact{margin-top:40px}.case-open #project-dialog .button{color:#111}
@media(min-width:1101px){.project-pair .project:nth-child(1){grid-template-columns:1fr 1.3fr}.project-pair .project:nth-child(1) .project-visual{order:2}.project-pair .project:nth-child(1) .project-info{order:1}}
@media(max-width:1100px){.project,.project.featured,.project.compact{gap:35px;min-height:70svh}.project-visual{height:430px;min-height:400px!important}.hero h1{font-size:61px}.sculpture-stage{right:-35px;top:165px;width:57%;height:500px}.contact .contact-grid{gap:35px}.service h3{font-size:24px}.service-signal{display:none}}
@media(max-width:760px){.editorial-cursor{display:none!important}.hero{min-height:0;height:auto;padding-bottom:100px}.hero .hero-label{font-size:10px;max-width:340px;letter-spacing:.8px}.hero h1{font-size:clamp(38px,8.6vw,61px);letter-spacing:-2px}.hero h1>span{letter-spacing:-2px}.hero .hero-copy{font-size:16px;line-height:1.75}.hero .button{font-size:12px;padding:15px 12px;gap:12px}.hero .availability{font-size:11px}.sculpture-stage{position:relative;right:auto;top:auto;width:100%;height:250px;margin:15px 0}.sculpture-meta{display:none}.sculpture-fallback{font-size:64px;letter-spacing:-5px}.sculpture-fallback>span{padding:10px 20px}.sculpture-fallback i{width:60%;height:65%}.hero-bottom{padding-block:25px}.expertise-strip .wrap{font-size:9px;letter-spacing:.7px}.eyebrow{font-size:11px}.service{grid-template-columns:30px 1fr 25px;padding-block:29px}.service h3{font-size:23px}.service p{font-size:15px}.service .tags{gap:8px 12px}.tags li{font-size:11px}.projects-section>.wrap{padding-top:45px}.project,.project.featured,.project.compact{grid-template-columns:1fr;gap:27px;min-height:0;padding-block:35px}.project-visual{height:380px;min-height:350px!important}.project-info h3,.compact .project-info h3{font-size:30px}.project-info p{font-size:16px}.education{padding:65px 17px 32px}.dashboard{min-height:245px}.dash-side{font-size:8px}.dash-content{padding:15px}.browser-chrome{font-size:8px}.phone-frame{scale:.8;margin-top:-8px}.flow-caption{font-size:8px}.identity-mark{font-size:70px;letter-spacing:-4px}.about-identity{aspect-ratio:1.1}.contact h2{font-size:42px}.contact-form input,.contact-form textarea{font-size:16px}.contact{padding-bottom:75px}#project-dialog{padding:75px 22px 45px}.dialog-close{top:14px;right:16px}#project-dialog>h2{font-size:35px}#dialog-content{grid-template-columns:1fr;gap:24px}.case-poster .project-visual{height:330px}.section-head{gap:20px}.contact .contact-grid{gap:35px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*:before,*:after{animation:none!important;transition:none!important}.word-reveal{transform:none!important}.editorial-cursor{display:none!important}}
@media(max-width:760px){.sculpture-stage canvas{display:none!important}.sculpture-stage .sculpture-fallback{display:grid!important}}
/* Real project images are presentation-only: no original URLs or embedded apps. */
.project-visual.real-project{display:flex;align-items:center;justify-content:center;padding:65px 25px 40px;cursor:default;overflow:hidden;background:radial-gradient(ellipse at 50% 0%,#272d36,#101317 85%)!important}
.project-capture{margin:0;width:100%;border:1px solid #4e5866;border-radius:6px;overflow:hidden;background:#11161c;transform:perspective(1400px) rotateY(-5deg) rotateX(2deg);box-shadow:14px 30px 60px #0008;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.capture-chrome{height:30px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;background:#20262f;border-bottom:1px solid #3c4552;color:#adb6c3;font-size:10px;letter-spacing:.4px}
.capture-chrome>span:first-child{font-size:8px;color:#75808f;letter-spacing:2px}
.project-capture img{display:block;width:100%;height:auto;aspect-ratio:1440/1000;object-fit:contain;object-position:center;background:#101318}
.project-capabilities{font-size:12px!important;color:#9aa5b4!important;line-height:1.8;letter-spacing:.25px;margin-top:25px}
@media(hover:hover) and (pointer:fine){.real-project:hover .project-capture{transform:perspective(1400px) rotateY(0) rotateX(0) translateY(-4px)}}
@media(max-width:760px){.project-visual.real-project{height:auto;min-height:290px!important;padding:55px 12px 28px}.project-capture{transform:none}.capture-chrome{font-size:8px;height:25px}.project-capture img{aspect-ratio:1440/1000}.project-capabilities{font-size:12px!important}}
@media(prefers-reduced-motion:reduce){.project-capture{transform:none!important}}
.project-capture img{aspect-ratio:auto}

/* Logotipos de las redes y del correo: SVG en línea, sin peticiones externas. */
.network-icon{display:block;color:#b0b8c5;transition:color var(--normal) var(--ease)}
.network-icon svg{display:block;width:28px;height:28px;fill:currentColor}
.social-card:hover .network-icon{color:#e6e9ee}
.social-inline a{display:inline-flex;align-items:center;gap:8px}
.social-inline .icon{width:14px;height:14px;flex:none;fill:currentColor}
.social-inline a[hidden]{display:none}
/* Botones y realces: barrido, brillo que sigue al cursor, trazo y estados. */
.button.primary{position:relative;overflow:hidden;isolation:isolate}
.button.primary:after{content:'';position:absolute;inset:-60% -45%;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 42%,#ffffffa6 50%,transparent 58%);transform:translateX(-125%)}
.cinematic .button.primary:hover:after{animation:button-sheen .85s var(--ease)}
.button.primary:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity var(--fast) var(--ease);background:radial-gradient(150px circle at var(--mx,50%) var(--my,50%),#ffffff5c,transparent 72%)}
.cinematic .button.primary:hover:before,.cinematic .button.primary:focus-visible:before{opacity:1}
.button.is-ready{background:#e6e9ee;color:#0b0c0e}
.nav-cta{position:relative;overflow:hidden;isolation:isolate}
.nav-cta:before{content:'';position:absolute;inset:0;z-index:-1;background:#ffffff12;transform:translateY(102%);transition:transform .5s var(--ease)}
.cinematic .nav-cta:hover:before,.cinematic .nav-cta:focus-visible:before{transform:none}
.nav-cta:after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;z-index:-1;background:linear-gradient(90deg,#e6e9ee,#c7cbd000);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.cinematic .nav-cta:hover:after,.cinematic .nav-cta:focus-visible:after{transform:scaleX(1)}
.text-link{position:relative}
.text-link:after{content:'';position:absolute;left:0;bottom:-7px;width:100%;height:1px;background:linear-gradient(90deg,#c7cbd0,#c7cbd000);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.cinematic .text-link:hover:after,.cinematic .text-link:focus-visible:after{transform:scaleX(1)}
.project-info .text-link{transition:border-color var(--normal) var(--ease)}
.project-info .text-link:hover{border-bottom-color:#c7cbd0}
.project-info .text-link:after{display:none}
.cinematic .service:after,.cinematic .social-card:after{content:'';display:block;position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity var(--normal) var(--ease);background:radial-gradient(420px circle at var(--mx,25%) var(--my,50%),#ffffff0d,transparent 70%)}
.cinematic .service:hover:after,.cinematic .service:focus-within:after,.cinematic .social-card:hover:after,.cinematic .social-card:focus-visible:after{opacity:1}
.button:focus-visible,.nav-cta:focus-visible,.text-link:focus-visible{outline:2px solid #e6e9ee;outline-offset:3px}
.button:active,.nav-cta:active{transform:translateY(1px)}
@keyframes button-sheen{to{transform:translateX(125%)}}

/* Aviso de movimiento: aparece solo si el sistema pide reducir animaciones. */
.motion-notice{position:fixed;left:24px;bottom:24px;z-index:30;max-width:330px;padding:20px 22px;background:#0f1114f2;border:1px solid #4c5057;box-shadow:0 24px 50px -30px #000;backdrop-filter:blur(8px)}
.motion-notice p{margin:0 0 16px;font-size:13px;line-height:1.7;color:#c3c8d0}
.motion-notice .button{font-size:12px;padding:12px 14px;gap:12px}
.motion-notice-close{position:absolute;top:6px;right:8px;border:0;background:none;color:#8d949e;font-size:20px;line-height:1;padding:6px}
.motion-notice-close:hover{color:#e6e9ee}
@media(max-width:760px){.motion-notice{left:12px;right:12px;bottom:12px;max-width:none}}

/* Arte ASCII decorativo: siempre detrás del contenido de su panel. */
.ascii-field{position:absolute;inset:0;z-index:-1;display:block;width:100%;height:100%;pointer-events:none}
.about-identity{isolation:isolate}
/* Fondo de espiral ASCII: un lienzo fijo que cubre el viewport completo y se desvanece
   solo en los bordes de la pantalla, así que no se ve recortado en ninguna sección. */
.ascii-backdrop{position:fixed;inset:0;z-index:0;display:block;width:100%;height:100%;pointer-events:none;-webkit-mask-image:radial-gradient(125% 105% at 50% 45%,#000 62%,transparent 100%);mask-image:radial-gradient(125% 105% at 50% 45%,#000 62%,transparent 100%)}
body>header,body>main,body>footer{position:relative;z-index:1}
.projects-section{background:#0d1210eb}
.contact{background:linear-gradient(180deg,#090a0b00,#14161af2)}
#ascii-monogram{display:block!important;z-index:0}
.sculpture-stage.ascii-monogram-ready .sculpture-fallback{display:none}
@media(max-width:760px){.ascii-backdrop{display:none}}  /* solo el fondo de pantalla completa: los campos del panel y de la cubierta SÍ dibujan en móvil */
@media(prefers-reduced-motion:reduce){.button.primary:after,.nav-cta:before,.nav-cta:after,.text-link:after{display:none}}

/* Iconos de redes en el navbar: el pie del hero queda limpio. */
.header-social{display:flex;align-items:center;gap:18px;margin-left:26px}
.header-social a{display:grid;place-items:center;color:#9aa1ab;transition:color var(--fast) var(--ease),transform var(--fast) var(--ease)}
.header-social a:hover,.header-social a:focus-visible{color:#e6e9ee;transform:translateY(-2px)}
.header-social .icon{width:17px;height:17px;fill:currentColor}
@media(max-width:1100px){.header-social{gap:14px;margin-left:16px}.header-social .icon{width:15px;height:15px}}
@media(max-width:900px){.header-social{display:none}}

/* Pie del hero: ubicación a la izquierda, flecha a la derecha. */
.hero-bottom .location{margin-left:0}
.hero-bottom .scroll-cue{margin-left:auto}

/* Retrato en «Sobre mí»: la foto abajo, el campo ASCII superpuesto y el texto encima. */
.about-portrait{z-index:0;object-position:50% 26%;filter:grayscale(1) contrast(1.02)}
.about-identity:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#090a0b99,#090a0b1f 34%,#090a0bf7)}
#ascii-about{z-index:2}
.about-identity>*:not(.ascii-field):not(.about-portrait){position:relative;z-index:3}
.about-identity{padding-bottom:14px}
.about-identity .identity-mark{align-content:end}
.about-identity .identity-mark>span{margin-top:16px}
.about-identity .identity-bottom{padding-top:12px}

/* Capturas de los proyectos: apagadas en gris oscuro; al pasar el cursor recuperan su color. */
@media(hover:hover) and (pointer:fine){
  .project-capture img{filter:grayscale(1) brightness(.88) contrast(1.04);transition:filter .9s var(--ease)}
  .real-project:hover .project-capture img,.real-project:focus-within .project-capture img{filter:grayscale(0) brightness(1) contrast(1)}
}
@media(prefers-reduced-motion:reduce){.project-capture img{transition:none}}

/* ============================================================================================
   CAPA MÓVIL (≤760px). Una sola fuente de verdad: las tres hojas anteriores (styles,
   art-direction, premium) traían reglas de móvil que se peleaban entre sí, y de ahí los
   desbordes y la marca ilegible. Aquí se recompone la página como una columna limpia.
   ============================================================================================ */
@media(max-width:760px){
  /* --- base: sin scroll lateral y texto que no se desborda --- */
  html{overflow-x:clip;-webkit-text-size-adjust:100%}
  body{font-size:16px;line-height:1.7}
  .wrap{width:calc(100% - 36px)}
  h1,h2,h3{text-wrap:balance;overflow-wrap:break-word}
  .section{padding-block:58px}
  .section-head{margin-bottom:24px}
  .eyebrow{font-size:10px;letter-spacing:1.5px}
  img,canvas,svg{max-width:100%}

  /* --- cabecera --- */
  .header{gap:12px;padding:11px 13px}
  .brand{gap:10px}
  .monogram{font-size:30px}
  .brand-name{font-size:10px;letter-spacing:.9px}
  .brand-name>span{font-size:7px;letter-spacing:1.1px}
  .nav-cta{margin-left:auto;font-size:12px;padding:12px 14px;min-height:44px;display:inline-flex;align-items:center}
  .menu-toggle{width:44px;height:44px;display:grid;place-items:center;font-size:17px}
  .header-social{display:none}
  .header nav{top:calc(100% + 8px);left:0;right:0;gap:0;padding:8px 14px;border-radius:10px;background:#0d0e11fa;box-shadow:0 26px 50px -30px #000}
  .header nav a{font-size:16px;padding:15px 4px;border-bottom:1px solid #212327}
  .header nav a:last-child{border-bottom:0}
  .header nav a:after{display:none}

  /* --- hero --- */
  .hero{padding-top:128px;padding-bottom:92px;min-height:0;height:auto}
  .hero .availability{top:94px;left:0;right:auto;font-size:10px;letter-spacing:1px}
  .hero .hero-label{font-size:9px;letter-spacing:1.1px;line-height:1.9;max-width:100%;margin:0 0 18px}
  .hero h1{font-size:clamp(33px,9.4vw,50px);line-height:1.1;letter-spacing:-1.5px;margin:0 0 16px;max-width:100%}
  .hero h1>span,.hero h1 .accent-line{letter-spacing:-1.5px}
  .hero .hero-copy{font-size:15.5px;line-height:1.72;max-width:100%;margin:0}
  .hero-actions{margin-top:22px;gap:10px;flex-wrap:wrap}
  .hero .button{flex:1 1 100%;justify-content:space-between;min-height:50px;font-size:13px;padding:15px 16px}
  .hero .secondary{margin-left:0;padding-inline:16px}

  /* El AE ASCII: caja propia, sin el diagrama de reserva encima y con el glifo a escala. */
  .sculpture-stage{position:relative;right:auto;top:auto;left:auto;width:100%;height:auto;aspect-ratio:1.7;margin:26px 0 0}
  .sculpture-stage.ascii-monogram-ready canvas{display:block!important}
  .sculpture-stage.ascii-monogram-ready .sculpture-fallback{display:none!important}
  .sculpture-meta{display:none!important}
  .hero-edition{display:none!important}
  .hero-bottom{position:absolute;inset:auto 0 0;padding:16px 0 20px;border-top:1px solid #2b2d31;justify-content:center}
  .hero .location{display:none}
  .hero-bottom .scroll-cue{margin:0;width:44px;height:44px;display:grid;place-items:center}
  .ascii-backdrop{display:none}

  /* --- franja de especialidades --- */
  .expertise-strip .wrap{font-size:9px;letter-spacing:1px;gap:9px;padding-block:18px;line-height:1.8}

  /* --- servicios --- */
  .services{grid-template-columns:1fr;gap:0}
  .service{grid-template-columns:26px 1fr 22px;gap:12px;padding:22px 0}
  .service h3{font-size:21px;line-height:1.25}
  .service p{font-size:14.5px;line-height:1.7;max-width:100%}
  .service .tags{gap:7px 10px}
  .service .tags span{font-size:9.5px;padding:5px 8px}
  .service>a{grid-column:3;grid-row:1/4;width:44px;height:44px;display:grid;place-items:center}
  .service-top>span:last-child{font-size:22px}

  /* --- proyectos: alto natural, sin cajas vacías gigantes --- */
  .projects-section>.wrap{padding-top:0}
  .project,.project.featured,.project.compact{grid-template-columns:1fr;gap:22px;padding-block:32px}
  .project-visual,.project-visual.real-project{height:auto;min-height:0!important;padding:26px 10px 18px}
  .project-capture img{aspect-ratio:1440/1000}
  .capture-chrome{font-size:8px}
  .project-info{padding:0}
  .project-info h3,.compact .project-info h3{font-size:25px;line-height:1.2}
  .project-info p{font-size:15.5px;line-height:1.7;max-width:100%}
  .project-capabilities{font-size:11.5px!important;letter-spacing:.6px;line-height:2}
  .project-pair{gap:24px;margin-top:24px}
  .project-info .text-link{min-height:44px;display:inline-flex;align-items:center}

  /* --- sobre mí --- */
  .about{gap:28px}
  .about-copy h2{font-size:30px;line-height:1.16}
  .about-lead{font-size:16.5px}
  .about-copy p{font-size:15.5px;line-height:1.75}
  .about-identity{aspect-ratio:1.06;max-width:100%;padding:24px 0 12px}
  .about-portrait{object-position:50% 20%}
  .about-identity .eyebrow{font-size:9.5px;letter-spacing:1.4px}
  .identity-mark{font-size:clamp(42px,13.4vw,64px);letter-spacing:-2.4px;line-height:1}
  .identity-mark>span{font-size:9.5px;letter-spacing:1.2px;margin-top:12px}
  .identity-bottom{flex-wrap:wrap;gap:4px 12px;padding-top:11px;font-size:9.5px;letter-spacing:.8px}
  .about-skills{gap:9px}
  .about-skills span{font-size:10px;padding:8px 11px}

  /* --- contacto --- */
  .contact{padding-bottom:58px}
  .contact h2{font-size:clamp(30px,9.6vw,40px);line-height:1.14}
  .contact .contact-grid{gap:26px}
  .contact-email{font-size:16px;overflow-wrap:anywhere}
  .contact-form{padding:26px 0 0}
  .contact-form input,.contact-form textarea{font-size:16px;min-height:50px;padding:14px}
  .contact-form .button{width:100%;min-height:50px;justify-content:space-between}
  .form-note,.form-status{font-size:11.5px;line-height:1.7}

  /* --- redes y pie --- */
  .social-cards{grid-template-columns:1fr;gap:14px}
  .social-card{padding:22px 20px}
  .social-card h3{font-size:20px;margin-top:16px}
  .footer{flex-wrap:wrap;gap:12px 16px;padding-block:26px;font-size:10px;line-height:1.7}
  .footer>span:nth-of-type(2){order:4;width:100%;margin-left:0;max-width:none;font-size:10px}
  .footer>a:last-child{margin-left:auto}
  .footer>a{padding:6px 0}
  .footer:after{display:none}

  /* --- avisos y diálogos --- */
  .motion-notice{left:12px;right:12px;bottom:12px;max-width:none;font-size:12px}
  #project-dialog{padding:64px 20px 40px}
  #project-dialog>h2{font-size:30px;line-height:1.18}
}

@media(max-width:420px){
  .wrap{width:calc(100% - 28px)}
  .hero{padding-top:118px;padding-bottom:86px}
  .hero h1{font-size:clamp(31px,9.9vw,42px)}
  .hero .hero-copy{font-size:15px}
  .identity-mark{font-size:clamp(38px,13.2vw,54px)}
  .project-info h3,.compact .project-info h3{font-size:23px}
  .about-copy h2,.contact h2{font-size:28px}
  .expertise-strip .wrap{font-size:8px;letter-spacing:.8px}
}

/* Iconos de flecha en SVG: en iOS/Android los glifos ↗ ↓ ↑ ✳ ☰ se dibujan como emoji a color.
   Dibujados a mano heredan el color del texto y se ven iguales en cualquier sistema. */
.arrow{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.12em;fill:none;
  stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.button .arrow,.nav-cta .arrow,.service>a .arrow{width:.92em;height:.92em}
.scroll-cue .arrow{width:1.05em;height:1.05em;stroke-width:1.7}
.menu-toggle .menu-icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.menu-toggle .menu-icon:last-child{display:none}
.menu-toggle[aria-expanded="true"] .menu-icon:first-child{display:none}
.menu-toggle[aria-expanded="true"] .menu-icon:last-child{display:block}
.external .arrow{width:.95em;height:.95em}

/* ===== 00 / ATAJOS · hub del teléfono (tipo Linktree, muy detallado). Solo en móvil. ===== */
.hub{display:none}
@media(max-width:760px){
  /* En el teléfono la portada es el hub: el hero (titular y copy) no se muestra,
     y el resto de la página sigue igual al bajar. */
  .hero{display:none}
  .hero-bottom{display:none}
  .hub{display:block;padding:100px 0 42px;border-bottom:1px solid #24262a}
  .hub .eyebrow{font-size:10px;letter-spacing:1.7px;color:#8d949e;margin-bottom:14px}
  .hub h2{font-size:clamp(27px,8.6vw,36px);line-height:1.15;letter-spacing:-.7px;margin:0 0 22px;color:#f0f0ed}
  .hub h2>span{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;color:#d3d5d8}

  /* la portada: foto → efecto ASCII → velo inferior → identidad (ese orden es el que hace legible el texto) */
  .hub-cover{position:relative;aspect-ratio:2.3;border:1px solid #24262a;border-radius:14px;overflow:hidden;isolation:isolate;background:#111214}
  .hub-portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;filter:grayscale(1) contrast(1.03);z-index:0}
  #ascii-hub{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
  .hub-cover:after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,#090a0b00 38%,#090a0bee 74%)}
  .hub-identity{position:absolute;left:16px;right:16px;bottom:13px;z-index:3;display:flex;flex-direction:column;gap:5px}
  .hub-name{font-size:20px;font-weight:600;letter-spacing:-.4px;color:#f7f8f6}
  .hub-role{font:9px 'Courier New',monospace;letter-spacing:1.4px;color:#b3b9c2}
  .hub-status{display:flex;align-items:center;gap:8px;font:8px 'Courier New',monospace;letter-spacing:1px;color:#c0c6cf}
  .hub-status i{width:6px;height:6px;border-radius:50%;background:#cfd4da}

  .hub-label{font:9px 'Courier New',monospace;letter-spacing:1.6px;color:#8d949e;margin:26px 0 10px}
  .hub-actions,.hub-list{display:flex;flex-direction:column;gap:9px}
  .hub-card{position:relative;display:flex;align-items:center;gap:14px;min-height:66px;padding:13px 16px;
    border:1px solid #24262a;border-radius:13px;background:#111214;color:inherit;text-decoration:none;
    transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease),transform var(--fast) var(--ease)}
  .hub-card:active{transform:scale(.985);border-color:#4a5058;background:#15171a}
  .hub-card:focus-visible{outline:2px solid #c7cbd0;outline-offset:2px}
  .hub-icon{flex:none;display:grid;place-items:center;width:38px;height:38px;border:1px solid #34383e;border-radius:9px;background:#1c1e22;color:#b6bdc9}
  .hub-icon svg{width:17px;height:17px;fill:currentColor}
  .hub-icon.icon-stroke svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .hub-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
  .hub-text b{font-size:14.5px;font-weight:600;letter-spacing:-.1px;color:#f0f0ed}
  .hub-text em{font-style:normal;font-size:11.5px;line-height:1.5;color:#a2a3a6}
  .hub-text small{font:8px 'Courier New',monospace;letter-spacing:1.1px;color:#7a828c}
  .hub-line{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
  .hub-num{flex:none;width:20px;font:10px 'Courier New',monospace;letter-spacing:1px;color:#6c747e}
  .hub-card>.arrow{flex:none;width:13px;height:13px;color:#a8afb9}
  .hub-row{min-height:76px}
  .hub-row .hub-text{justify-content:center}
  .hub-foot{margin-top:26px;padding-top:15px;border-top:1px solid #24262a;display:flex;align-items:center;justify-content:space-between;gap:12px}
  .hub-foot span{display:flex;align-items:center;gap:8px;font:9px 'Courier New',monospace;letter-spacing:1.1px;color:#8c939d}
  .hub-foot .arrow{width:12px;height:12px;color:#a8afb9}
}
@media(max-width:420px){
  .hub-name{font-size:18px}
  .hub-card{gap:12px;padding:12px 14px}
  .hub-icon{width:34px;height:34px}
  .hub-icon svg{width:15px;height:15px}
}

/* ===== Reserva de la marca AE =====
   Solo se ve si el arte ASCII no puede dibujar (navegador sin canvas, sin observadores…).
   Antes eran cuatro marcos girados con una AE gigante: parecía un gráfico roto. Ahora es una
   marca limpia y, si hubo un fallo, lo dice en mono debajo para poder diagnosticarlo desde el
   propio teléfono (no hay consola accesible en un navegador incrustado). */
.sculpture-fallback{font-size:clamp(38px,11.5vw,62px)!important;letter-spacing:-3px;font-weight:500}
.sculpture-fallback i{display:none!important}
.sculpture-fallback>span{border:1px solid #2b2d31;border-radius:12px;background:#101214;color:#dfe1e4;padding:10px 20px}
.sculpture-fallback:after{content:attr(data-nota);display:block;margin-top:12px;max-width:280px;
  font:9px/1.7 'Courier New',monospace;letter-spacing:1px;color:#7d858f;text-align:center}
.sculpture-fallback:not([data-nota]):after{display:none}
.sculpture-stage.ascii-monogram-ready .sculpture-fallback{display:none!important}