/* 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-field{display:none}}
@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(.72) contrast(1.06);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}