/* BOCETO 02 — Retrato, tinta y capas de papel */
:root{--paper:#e7d7b6;--ink:#191b18;--red:#d54a31;--blue:#155786;--yellow:#e9ae32}
body{background-color:var(--paper);background-image:repeating-linear-gradient(93deg,transparent 0 160px,#53371608 161px 162px),repeating-linear-gradient(0deg,transparent 0 45px,#fff1cb20 46px 47px)}body:before{opacity:.3}.nav{position:relative;z-index:2;border-bottom:2px solid var(--ink);padding-block:18px;background:var(--paper)}.signature{font-size:42px}.signature span{color:var(--blue)}.hero{max-width:1600px;min-height:820px;grid-template-columns:1fr 1fr;padding-top:70px;padding-bottom:0;gap:0;isolation:isolate}.hero:before{content:'';position:absolute;top:0;bottom:0;left:0;width:56%;background:#171a17;clip-path:polygon(0 0,99% 0,97% 19%,100% 36%,97% 58%,100% 76%,97% 100%,0 100%);z-index:-1}.hero-copy{color:var(--paper);z-index:2;padding-right:25px}.hero .eyebrow{color:var(--yellow);font-size:11px;letter-spacing:2px;margin-bottom:45px}.margin-note{font-family:'Permanent Marker',cursive;color:#c4baa5;font-size:15px;transform:rotate(-4deg);margin-bottom:18px}.hero h1{font-size:clamp(68px,7.4vw,118px);line-height:.99;letter-spacing:-1px;position:relative;z-index:2;margin-bottom:32px}.design{color:var(--yellow)}.design:after{height:7px;background:var(--red);bottom:7px;right:-18px;clip-path:polygon(0 25%,80% 0,100% 70%,35% 100%)}.technology{color:var(--paper);-webkit-text-stroke:1px var(--paper);position:relative}.technology:after{content:'↗';font-family:'Permanent Marker',cursive;position:absolute;color:var(--red);right:-65px;top:8px;font-size:70px;transform:rotate(15deg);-webkit-text-stroke:0}.hero-manifesto{font-size:21px;line-height:1.35;font-weight:500;letter-spacing:-.7px;margin-bottom:20px}.intro{color:#d7cfbd;font-size:13px;max-width:355px;line-height:1.8}.button{color:var(--ink);background:var(--yellow);transform:rotate(-2deg);border:2px solid var(--yellow);margin-top:10px}.button:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}.art{position:relative;align-self:stretch;margin:-70px -13.7% 0 -8%;transform:none;max-width:none;width:auto;z-index:0;min-height:760px}.art img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:50% 38%;filter:saturate(.95)}.art:after{content:'';position:absolute;inset:0;box-shadow:inset 20px 0 30px #171a1744;pointer-events:none}.art-caption{position:absolute;bottom:26px;right:20px;color:var(--paper);background:var(--ink);padding:8px 12px;font-size:8px;z-index:1;transform:rotate(-3deg)}.portrait-label{position:absolute;right:20px;top:24px;background:var(--red);color:var(--paper);padding:14px 22px;font-family:'Permanent Marker',cursive;font-size:18px;transform:rotate(5deg);line-height:1.1;z-index:1;box-shadow:5px 5px 0 #171a17}.hero-bottom{background:var(--paper);position:relative;z-index:2;margin:0 -6.8%;padding:20px 6.8%;border-top:3px solid var(--ink);color:var(--ink);gap:20px}.ticker{background:var(--red);color:var(--paper);margin-top:0;padding:9px 0;transform:rotate(-1.5deg);position:relative;z-index:2}.ticker span{font-size:35px}.section{padding-top:110px;padding-bottom:110px}.capabilities{position:relative}.capabilities:before{content:'✳';position:absolute;font-family:'Permanent Marker',cursive;font-size:120px;color:var(--red);bottom:30px;left:13%;transform:rotate(15deg)}.section-heading h2{font-size:65px}.hand{color:var(--red)}.areas{border-top:5px solid var(--ink);transform:rotate(-.7deg)}summary{padding:28px 12px}.area-number{color:var(--blue)}summary strong{text-transform:uppercase;font-family:'Barlow Condensed',Impact,sans-serif;font-size:31px;letter-spacing:.2px}details[open]{background:#f6ebd3;box-shadow:5px 5px 0 #191b18}.area-body{padding-left:50px}.editor-note{background:#e7d7b6}.about{background:#155786;position:relative;border-block:9px solid var(--ink)}.about:before{content:'PENSAR ≠ SOLO IMAGINAR';font-family:'Permanent Marker',cursive;position:absolute;bottom:20px;right:6%;color:var(--yellow);font-size:17px;transform:rotate(-3deg)}.about h2{font-size:61px}.about-text{color:#f0e4cd}.timeline article{border-top:2px solid #e7d7b688}.timeline p{color:#ded3bd}.projects{background:var(--paper)}.project-placeholder{border:2px solid var(--ink);box-shadow:8px 8px 0 var(--red);background:#eddfc3}.contact{background:var(--ink);border-top:10px solid var(--red);position:relative}.contact:after{content:'EN CONSTRUCCIÓN. EN MOVIMIENTO.';position:absolute;right:7%;top:60px;font-family:'Permanent Marker',cursive;color:var(--yellow);font-size:14px;transform:rotate(5deg)}.contact h2{font-size:120px}.contact h2 span{color:var(--yellow)}.contact-bottom{color:var(--paper)}footer{background:var(--yellow);border-top:3px solid var(--ink)}
@media(min-width:1600px){.hero{min-height:900px}.art{margin-right:calc((1268px - 100vw)/2)}}
@media(max-width:1050px) and (min-width:801px){.hero h1{font-size:76px}.technology:after{display:none}.hero{min-height:770px}.art{min-height:700px}.hero-manifesto{font-size:18px}.section-heading h2{font-size:52px}}
@media(max-width:800px){.hero{grid-template-columns:1fr;min-height:0;padding-top:42px}.hero:before{width:100%;bottom:auto;height:640px;clip-path:none}.hero-copy{padding-right:0;padding-bottom:32px}.hero .eyebrow{margin-bottom:30px}.hero h1{font-size:clamp(62px,12.5vw,100px);max-width:640px}.technology:after{display:none}.hero-manifesto{font-size:22px}.intro{max-width:460px}.art{margin:0 -6.8%;width:auto;min-height:0;aspect-ratio:1122/1402;justify-self:stretch}.art img{object-fit:contain}.art:after{display:none}.portrait-label{font-size:14px;right:20px}.art-caption{font-size:7px;bottom:20px}.hero-bottom{margin:0 -6.8%;padding-block:17px}.section{padding-block:65px}.capabilities:before{display:none}.section-heading h2{font-size:53px}.about h2{font-size:48px}.about:before{font-size:12px;bottom:18px}.about{padding-bottom:80px}.contact h2{font-size:80px}.contact:after{position:static;display:block;margin-top:36px;font-size:12px}.contact-bottom{margin-top:40px}summary strong{font-size:28px}.ticker span{font-size:29px}}
/* BOCETO 03 — Identidad y fusión del retrato */
.nav .signature{display:flex;align-items:center;gap:13px;transform:none;letter-spacing:0;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;font-size:29px;line-height:1}.nav .signature .full-name{color:var(--ink);font-size:inherit;margin:0;letter-spacing:-.3px}.name-crown{width:49px;height:38px;transform:rotate(-8deg);flex:none}.nav-note{font-size:10px}.hero:before{width:100%;clip-path:none;background:#171a17}.hero{background:#171a17}.art{margin-left:-23%;z-index:0}.art img{-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 24%,#000 94%,transparent 100%),linear-gradient(to bottom,#000 0%,#000 85%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0%,#000 24%,#000 94%,transparent 100%),linear-gradient(to bottom,#000 0%,#000 85%,transparent 100%);mask-composite:intersect}.art:after{box-shadow:none;background:linear-gradient(90deg,#171a17 0%,transparent 28%),linear-gradient(0deg,#171a17 0%,transparent 20%);inset:-1px;pointer-events:none}.art-caption{background:transparent;right:30px;bottom:20px;opacity:.65}.hero-copy{position:relative}.hero-copy .intro{max-width:335px}.portrait-label{display:none}.capabilities:before{display:none}.dino-illustration{position:relative;width:280px;height:260px;margin:25px 0 -5px 10px;transform:rotate(-7deg);mix-blend-mode:multiply}.dino-illustration img{position:absolute;max-width:none;width:330px;height:auto;left:-60px;top:-35px;clip-path:polygon(35% 8%,46% 11%,50% 8%,51% 13%,55% 9%,55% 18%,50% 20%,55% 25%,58% 34%,63% 44%,72% 53%,87% 61%,76% 61%,62% 57%,53% 51%,49% 59%,40% 60%,42% 54%,38% 48%,35% 56%,29% 56%,33% 50%,32% 42%,30% 41%,29% 38%,35% 36%,33% 30%,30% 26%,29% 23%,32% 20%,37% 18%)}
@media(min-width:1600px){.art{margin-right:-13.7%}}
@media(max-width:1050px){.nav .signature{font-size:24px}.nav-note{display:none}.name-crown{width:40px}.art{margin-left:-15%}}
@media(max-width:800px){.nav .signature{font-size:clamp(18px,4vw,27px);gap:7px}.name-crown{width:34px;height:30px}.nav-contact{font-size:11px}.nav-contact span{margin-left:4px}.hero:before{height:100%;bottom:0}.hero-copy{padding-bottom:0}.art{margin:-10px -6.8% 0;aspect-ratio:1122/1402}.art img{-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 10%,#000 82%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 10%,#000 82%,transparent 100%)}.art:after{display:block;background:linear-gradient(0deg,#171a17 0%,transparent 18%),linear-gradient(180deg,#171a17 0%,transparent 12%)}.art-caption{bottom:15px}.dino-illustration{width:250px;height:245px;margin:20px auto 0}.hero-copy .intro{max-width:460px}}
/* Pintura integrada a la pared: el PNG conserva únicamente pigmento y silueta. */
.dino-illustration{width:300px;height:310px;margin:25px 0 0;isolation:isolate;transform:rotate(-5deg);mix-blend-mode:multiply}
.dino-illustration img{position:relative;inset:auto;width:100%;height:100%;object-fit:contain;clip-path:none;opacity:.94;filter:contrast(1.06);mix-blend-mode:multiply}
.dino-illustration:after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.2;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23e7d7b6' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");mix-blend-mode:soft-light}
@media(max-width:800px){.dino-illustration{width:260px;height:280px;margin:24px auto 0}}
/* BOCETO 05 — Verde mineral, azul tinta, negro y pausas de papel */
:root{--paper:#e9e3d3;--ink:#18221e;--red:#286b54;--blue:#215a72;--yellow:#d3b861}
body{background-color:var(--paper)}.nav{background:#e9e3d3;border-bottom:1px solid #18221e55}.hero,.hero:before{background:#151e1b}.art:after{background:linear-gradient(90deg,#151e1b 0%,transparent 30%),linear-gradient(0deg,#151e1b 0%,transparent 20%)}.hero-bottom{background:#28604c;color:#f0eade;border-top:0;padding-block:22px}.capabilities{padding-top:90px;padding-bottom:90px}.hand{color:#286b54}.design{color:#dbc66d}.design:after{background:#62947c;height:5px}.technology:after{color:#62947c}.button{background:#d3b861;border-color:#d3b861}.dot{background:#70a58b}.areas{border-top:3px solid #286b54;transform:none}summary{padding-block:24px}summary strong{font-size:29px}details{border-bottom:1px solid #18221e44}details[open]{background:#f4f0e6;box-shadow:none;border-left:3px solid #286b54}details[open] summary{padding-left:10px}.editor-note{background:#e5e9df}.about{background:#183e50;border-block:0}.about:before{display:none}.about .underlined{text-decoration-color:#8eb39d}.about .scribble{color:#c6d6b6}.timeline article>span{color:#c6d6b6}.about-text,.timeline p{color:#e5e7dd}.education{display:grid;grid-template-columns:1fr 1.05fr;gap:85px;background:#d7dfd0;max-width:none;padding-inline:max(6%,calc((100vw - 1268px)/2))}.education h2{font-size:56px}.education-intro>p:last-of-type{font-size:15px;line-height:1.8;max-width:400px}.education-crown{width:90px;height:65px;color:#286b54;transform:rotate(-8deg);margin-top:20px}.education-list{border-top:2px solid #286b54}.education-list article{display:flex;gap:26px;padding:25px 0;border-bottom:1px solid #18221e33}.education-list article>span{font-family:'Courier New',monospace;font-size:12px;font-weight:bold;color:#245d47;padding-top:3px}.education-list h3{font-size:17px;font-weight:600;line-height:1.4;margin:0 0 7px}.education-list p{font-size:12px;line-height:1.6;margin:0;color:#46554c}.projects{background:#e9e3d3}.project-placeholder{background:transparent;box-shadow:none;border:1px dashed #286b5477;transform:none}.project-placeholder>span{color:#286b54}.contact{background:#151e1b;border-top:4px solid #286b54}.contact:after{display:none}.contact h2 span,.contact h2 svg{color:#a9c4af}.contact h2{font-size:105px}.contact .eyebrow{color:#a9c4af}.contact-bottom{color:#e9e3d3}footer{background:#e9e3d3;border-top:1px solid #18221e44}.name-crown path:first-child{fill:#d3b861}.dino-illustration{opacity:.92}.art-caption{display:none}
@media(max-width:800px){.education{grid-template-columns:1fr;gap:30px}.education h2{font-size:46px}.education-crown{width:65px;margin-top:6px}.education-list article{gap:20px;padding-block:22px}.education-list h3{font-size:16px}.capabilities{padding-block:60px}.contact h2{font-size:80px}.art:after{background:linear-gradient(0deg,#151e1b 0%,transparent 18%),linear-gradient(180deg,#151e1b 0%,transparent 12%)}.hero-bottom{padding-block:17px}}
/* Azul eléctrico, lima y tinta: energía con espacio para leer. */
:root{--paper:#f1eddf;--ink:#13201d;--red:#166b53;--blue:#2359ea;--yellow:#b6ef48}
body{background-color:#f1eddf}.nav{background:#f1eddf}.name-crown path:first-child{fill:#b6ef48}.hero .eyebrow{color:#b6ef48}.dot{background:#32d9d0}.design{color:#b6ef48}.design:after{background:#26d4d3}.hero-bottom{background:#2455e8;color:#fff;border-bottom:5px solid #32d4ce}.hero-bottom span:first-child{color:#d5ff91}.button{background:#b6ef48;border-color:#b6ef48;color:#14221e}.button:hover{background:#40d8db;border-color:#40d8db;color:#14221e}.capabilities{background:#f1eddf}.hand{color:#2658e8}.areas{border-top-color:#2359ea}.area-number{color:#2359ea}details[open]{background:#fffdf4;border-left-color:#2359ea}.about{background:#2455e8;color:#fff}.about .eyebrow,.timeline article>span{color:#d3ff8b}.about h2 .underlined{text-decoration-color:#b6ef48}.about-text,.timeline p{color:#edf3ff}.about .scribble{color:#d3ff8b}.education{background:#c2ef6d}.education .hand{color:#195847}.education-list{border-top-color:#195847}.education-list article{border-bottom-color:#19584755}.education-list article>span{color:#195847}.education-crown{color:#195847}.education-intro>p:last-of-type{color:#223e2c}.contact{position:relative;isolation:isolate;overflow:hidden;background:#12242a;border-top:0;padding-top:100px;padding-bottom:65px;color:#f4eedf}.contact:before{content:'';position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 93% 14%,#1b4c8455,transparent 43%),radial-gradient(ellipse at 0 90%,#24705c44,transparent 55%),repeating-linear-gradient(0deg,transparent 0 89px,#abc0a710 90px 92px),repeating-linear-gradient(90deg,transparent 0 230px,#abc0a708 231px 233px)}.wall-marks{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.6;pointer-events:none}.contact .eyebrow{color:#40d8db}.wall-note{font-family:'Permanent Marker',cursive;font-size:16px;color:#f18bce;transform:rotate(-3deg);margin:32px 0 28px;letter-spacing:1px}.contact h2{font-family:'Permanent Marker',cursive;font-size:clamp(55px,7vw,105px);font-weight:400;line-height:1.2;letter-spacing:-3px;transform:rotate(-3deg);margin:0 0 40px;max-width:1000px;text-shadow:3px 3px 0 #12242a,-1px 1px 0 #f1eddf66}.contact h2 span{color:#b6ef48;position:relative;display:inline-block}.contact h2 span:after{content:'';position:absolute;bottom:0;left:-8px;right:-15px;height:6px;background:#2bd2df;transform:rotate(-4deg);clip-path:polygon(0 30%,95% 0,100% 60%,10% 100%)}.contact h2 svg{color:#f18bce;width:150px}.email{font-size:clamp(18px,3vw,32px);padding:14px 0;border-bottom:2px solid #40d8db}.email:hover{color:#b6ef48}.contact-bottom{border-top-color:#74c4c155;position:relative;color:#f1eddf}footer{background:#f1eddf}.education-list h3{color:#132b20}
@media(max-width:800px){.contact{padding-top:65px}.wall-note{font-size:12px;max-width:270px;line-height:1.7;margin:20px 0}.contact h2{font-size:clamp(43px,9.5vw,75px);letter-spacing:-2px;margin-bottom:30px}.contact h2 svg{width:75px}.wall-marks{opacity:.35}.contact .email{font-size:clamp(17px,4.8vw,28px)}.hero-bottom{border-bottom-width:3px}}
.whatsapp-contact{display:inline-flex;align-items:center;gap:14px;padding:18px 23px;background:#b6ef48;color:#14221e;border:2px solid #b6ef48;transform:rotate(-1deg);font-size:clamp(16px,2.2vw,25px);font-weight:700;line-height:1.3}.whatsapp-contact>svg{width:33px;height:33px;flex:none}.whatsapp-contact>span:last-child{margin-left:10px;font-size:29px}.whatsapp-contact:hover{background:#40d8db;border-color:#40d8db}.contact-bottom{align-items:center;gap:25px}.back-top{display:inline-flex;align-items:center;gap:12px;border:1px solid #a9c4af88;padding:12px 15px;color:#b6ef48;background:#12242a}.back-top svg{width:37px;height:28px;transform:rotate(-6deg);flex:none}.back-top:hover{background:#b6ef48;color:#12242a;border-color:#b6ef48}.back-top:focus-visible,.whatsapp-contact:focus-visible{outline-color:#40d8db}
@media(max-width:500px){.whatsapp-contact{padding:14px 15px;gap:9px;font-size:16px;max-width:100%}.whatsapp-contact>svg{width:27px}.whatsapp-contact>span:last-child{font-size:23px;margin-left:0}.contact-bottom{gap:22px}.back-top{margin-top:3px}}
.back-top{position:fixed;right:24px;bottom:24px;z-index:30;width:60px;height:60px;padding:12px;justify-content:center;border:2px solid #b6ef48;border-radius:50%;background:#12242a;color:#b6ef48;box-shadow:0 4px 16px #0005;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px);transition:opacity .2s,transform .2s,visibility .2s}.back-top.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.back-top span{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.back-top svg{width:36px;height:30px}.back-top:hover{transform:translateY(-3px)}footer{padding-right:100px}
@media(max-width:500px){.back-top{right:16px;bottom:max(16px,env(safe-area-inset-bottom));width:54px;height:54px;margin:0;padding:10px}footer{padding-right:85px}}
@media(prefers-reduced-motion:reduce){.back-top{transition:none}}