/* Alberto35M Portfolio | consolidated styles, original cascade order retained. */

/* ===== style.css ===== */

:root{color-scheme:dark;--bg:#10081b;--panel:#1b0c2a;--purple:#c65bf5;--line:#a54cc9;--light:#faf1ff;--muted:#d7b9e7;--pixel:'Press Start 2P',monospace;--body:'Pixelify Sans',monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#09050f;color:var(--light);font-family:var(--body);font-size:19px;line-height:1.3}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}h1,h2,h3,p{margin-top:0}.accent{color:var(--purple)}
.site-shell{max-width:1390px;margin:16px auto;min-height:calc(100vh - 32px);background:radial-gradient(ellipse at 75% 17%,#271039 0%,transparent 45%),var(--bg);border:4px solid var(--line);box-shadow:0 0 0 5px #190925,0 0 38px #480e6433;position:relative;overflow:hidden}.site-shell:before,.site-shell:after{content:'◆';position:absolute;color:var(--purple);font-size:19px;z-index:2}.site-shell:before{top:-9px;left:0}.site-shell:after{bottom:-8px;right:0}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:19px 46px;border-bottom:3px solid var(--line)}.brand{font-family:var(--pixel);font-size:clamp(13px,1.6vw,21px);white-space:nowrap}.topbar nav{display:flex;align-items:center;gap:10px}.topbar nav a{font-family:var(--body);font-weight:700;font-size:21px;text-transform:uppercase;padding:8px 16px;border:2px solid transparent}.topbar nav a:hover,.topbar nav a.active{color:#fff;border-color:var(--purple);background:#3a1455;box-shadow:3px 3px 0 #6b3087}.social{display:flex;gap:22px;border-left:2px solid var(--line);padding-left:25px}.social a{display:flex;width:25px;height:25px;align-items:center}.social svg{width:100%;height:100%}.social a:hover{color:var(--purple)}
.hero{display:grid;grid-template-columns:1.04fr 1fr;min-height:382px;align-items:center;padding:40px 58px 0;gap:20px}.hero-copy{position:relative;z-index:1}.eyebrow{font-family:var(--body);font-weight:700;font-size:21px;color:var(--purple);letter-spacing:1px}.blink{animation:blink 1.1s steps(1) infinite}@keyframes blink{50%{opacity:0}}.hero h1{font-family:var(--pixel);font-size:clamp(30px,4.3vw,57px);line-height:1.45;margin:18px 0 10px;white-space:nowrap}.intro{font-size:26px;max-width:520px;line-height:1.12}.actions{display:flex;gap:18px;flex-wrap:wrap;margin-top:28px}.btn{font-family:var(--body);font-size:21px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;min-height:55px;padding:12px 22px;border:3px solid var(--purple);transition:transform .15s,background .15s}.btn:hover{transform:translateY(-3px)}.btn.primary{background:var(--purple);color:#190920;box-shadow:4px 4px 0 #74378d}.btn.outline{background:#210e30}
.hero-art{height:342px;position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 60% 64%,#64228b55,transparent 56%)}.pixel-moon{position:absolute;top:27px;left:29%;width:62px;height:62px;background:#e7a9ff;border:9px solid #ac56d8;box-shadow:0 0 26px #c957ff88,0 0 65px #b34dff44;image-rendering:pixelated}.pixel-moon:after{content:'';position:absolute;inset:9px 16px 13px 7px;background:#c67fea;box-shadow:17px 8px #cf91ef}.pixel-star{position:absolute;color:#d46bfa;font-size:26px;animation:twinkle 3s ease-in-out infinite}.s1{top:15%;left:13%}.s2{top:46%;right:9%;animation-delay:1s}.s3{top:11%;right:20%;animation-delay:2s}.s4{top:62%;left:19%;animation-delay:.6s}@keyframes twinkle{50%{opacity:.4;transform:scale(.8)}}.cloud{position:absolute;width:104px;height:25px;background:#753295;clip-path:polygon(0 70%,20% 70%,20% 38%,36% 38%,36% 0,63% 0,63% 38%,83% 38%,83% 70%,100% 70%,100% 100%,0 100%);opacity:.85}.c1{top:32%;left:3%}.c2{top:17%;right:0;transform:scale(.85)}.landscape{position:absolute;bottom:0;left:0;right:0;height:90px;z-index:2}.terrain{position:absolute;bottom:0;height:48px;background:repeating-linear-gradient(90deg,#3a1655 0 16px,#4c2066 16px 32px);border-top:12px solid #a442ca;box-shadow:inset 0 10px #6d288f}.terrain-left{left:0;width:38%;clip-path:polygon(0 45%,30% 45%,30% 22%,58% 22%,58% 0,100% 0,100% 100%,0 100%);height:78px}.terrain-right{right:0;width:43%;height:96px;clip-path:polygon(0 75%,22% 75%,22% 42%,50% 42%,50% 0,100% 0,100% 100%,0 100%)}.skin-character{position:absolute;z-index:3;bottom:-10px;left:50%;height:300px;width:150px;object-fit:fill;image-rendering:pixelated;filter:drop-shadow(0 0 16px #b334f8aa);transform:translateX(-50%);animation:float 4.5s ease-in-out infinite}@keyframes float{50%{transform:translate(-50%,-7px)}}
.section-divider{display:flex;align-items:center;gap:12px;color:var(--purple);font-size:25px;margin:0 45px}.section-divider:before,.section-divider:after{content:'';flex:1;height:3px;background:var(--line)}.projects{padding:20px 55px 50px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}.section-heading h2{font-family:var(--pixel);font-size:clamp(16px,2vw,26px);margin:0;line-height:1.6}.folder-symbol{font-family:var(--body);font-size:40px;color:var(--purple);vertical-align:middle;margin-right:12px}.section-heading p{color:var(--muted);font-size:17px;margin:0}.filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:20px}.filter{border:2px solid #5d277c;color:#f2d9ff;background:#200f30;padding:5px 12px;font-size:18px}.filter:hover,.filter.active{background:var(--purple);color:#190920}.search{margin-left:auto;border:2px solid #5d277c;display:flex;align-items:center;gap:8px;padding:5px 10px;background:#200f30}.search input{border:0;outline:0;color:var(--light);background:transparent;width:150px;font-size:17px}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.project-card{border:3px solid var(--line);background:linear-gradient(#271039,#180b26);min-width:0;transition:transform .2s,border-color .2s}.project-card:hover{transform:translateY(-5px);border-color:#ed9bff}.project-card[hidden]{display:none}.cover-link{display:block;aspect-ratio:16/9;background:#301442;overflow:hidden}.cover-link img,.detail-cover img,.gallery img{width:100%;height:100%;object-fit:cover;display:block}.card-body{padding:14px 16px}.card-body h3{font-family:var(--body);font-weight:700;font-size:27px;line-height:1.03;min-height:55px;margin:0 0 8px}.card-body h3 a:hover{color:var(--purple)}.card-bottom{display:flex;align-items:center;gap:10px}.chip{font-size:19px;color:var(--muted)}.version{margin-left:auto;font-size:19px}.card-arrow{font-size:22px;color:var(--purple)}.empty{color:var(--muted)}.about{padding:35px 55px;border-top:2px solid #53246c;display:grid;grid-template-columns:1fr 1fr;gap:24px}.about h2,.detail-section h2{font-family:var(--pixel);font-size:17px;line-height:1.7}.about p{font-size:21px;color:var(--muted)}footer{display:flex;align-items:center;justify-content:center;gap:35px;color:var(--purple);font-size:23px;padding:28px}.footer-line{width:100px;height:2px;background:var(--line)}
.detail{padding:35px 55px 65px}.back{color:var(--purple)}.detail-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:38px;align-items:center;margin-top:25px}.detail-cover{border:3px solid var(--line);aspect-ratio:16/9;overflow:hidden}.tags{display:flex;gap:12px}.detail-intro h1{font-family:var(--pixel);font-size:clamp(17px,2.4vw,28px);line-height:1.6;margin:18px 0}.detail-intro>p,.rich-text{color:var(--muted)}.meta-row{display:flex;justify-content:space-around;gap:20px;margin:40px 0}.meta-row div{display:flex;flex-direction:column}.meta-row span{color:var(--muted)}.detail-section{padding:22px 0}.features{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.features span{color:var(--purple)}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.gallery a{aspect-ratio:16/9;border:2px solid var(--line);overflow:hidden}
@media(max-width:1100px){.topbar{padding:18px 22px}.topbar nav a{padding:6px 8px;font-size:18px}.hero{padding:30px 28px 0}.hero h1{font-size:clamp(25px,4vw,42px)}.projects{padding:20px 30px 40px}.section-heading p{display:none}.card-body h3{font-size:23px}}
@media(max-width:760px){.site-shell{margin:7px}.topbar{flex-wrap:wrap;justify-content:center;gap:15px}.brand{font-size:17px}.topbar nav{order:3;width:100%;justify-content:center}.social{border:0;padding:0}.hero{grid-template-columns:1fr;padding:36px 24px 0}.hero h1{font-size:clamp(24px,7vw,44px)}.hero-art{height:270px}.skin-character{height:250px;width:125px}.intro{font-size:22px}.projects{padding:20px 20px 35px}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.search{margin-left:0;width:100%}.search input{width:100%}.about{grid-template-columns:1fr;padding:25px}.detail{padding:25px}.detail-hero{grid-template-columns:1fr}.section-divider{margin:0 20px}}
@media(max-width:520px){.topbar nav a{font-size:16px}.eyebrow{font-size:15px}.hero h1{font-size:25px}.actions .btn{width:100%;font-size:19px}.project-grid,.gallery,.features{grid-template-columns:1fr}.section-heading h2{font-size:15px}.section-heading p{display:none}.card-body h3{min-height:0}.about h2,.detail-section h2{font-size:14px}footer{font-size:17px;gap:12px}.footer-line{width:35px}.meta-row{flex-wrap:wrap;justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important}}

/* DISEÑO V3: reconstrucción visual a partir de la propuesta aprobada */
:root{--bg:#11051d;--panel:#180925;--purple:#d55aff;--line:#c44cf1;--light:#fff4ff;--muted:#ead2fa}
body{background:#0c0413;font-family:'Pixelify Sans',monospace;font-weight:600}
.site-shell{max-width:1480px;margin:10px auto;border:4px solid #cc54f5;background:radial-gradient(ellipse at 69% 27%,#320e4a 0,transparent 52%),#11051d;box-shadow:0 0 0 3px #4c1965,0 0 34px #6b1b7b44;clip-path:polygon(14px 0,calc(100% - 14px) 0,calc(100% - 14px) 5px,calc(100% - 5px) 5px,calc(100% - 5px) 14px,100% 14px,100% calc(100% - 14px),calc(100% - 5px) calc(100% - 14px),calc(100% - 5px) calc(100% - 5px),calc(100% - 14px) calc(100% - 5px),calc(100% - 14px) 100%,14px 100%,14px calc(100% - 5px),5px calc(100% - 5px),5px calc(100% - 14px),0 calc(100% - 14px),0 14px,5px 14px,5px 5px,14px 5px)}
.topbar{padding:14px 46px;border-bottom:4px solid #bd4ce8;min-height:80px}
.brand{font-size:clamp(17px,2vw,28px);letter-spacing:-1px}
.topbar nav a{font-family:'Press Start 2P',monospace;font-size:13px;padding:13px 15px;line-height:1.5}
.topbar nav a.active,.topbar nav a:hover{background:#3a1159;border:3px solid #d55aff;box-shadow:4px 4px 0 #6b248b;clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px)}
.social{gap:24px}.social a{width:28px;height:28px}
.hero{grid-template-columns:1fr 1.05fr;min-height:375px;padding:20px 45px 0;gap:12px}
.hero-copy{padding:0 0 28px 12px}
.eyebrow{font-family:'Pixelify Sans',monospace;font-size:23px;font-weight:700;color:#d960ff;letter-spacing:.4px}
.hero h1{font-family:'Press Start 2P',monospace;font-size:clamp(29px,4vw,56px);letter-spacing:-2px;line-height:1.35;margin:15px 0 16px}
.intro{font-family:'Pixelify Sans',monospace;font-size:28px;line-height:1.05;max-width:580px;font-weight:600}
.btn{font-family:'Press Start 2P',monospace;font-size:12px;line-height:1.7;min-height:58px;border-width:3px;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px)}
.btn.primary{background:#d85cfb;color:#16071f}.btn.outline{background:#210e32}
.hero-art{height:367px;align-self:end;background:url('/assets/images/hero-scene.png') center bottom / cover no-repeat;image-rendering:auto;overflow:hidden;filter:saturate(1.08)}
.section-divider{margin:0 42px;font-size:32px}.section-divider:before,.section-divider:after{background:#c94ef3;height:4px}
.projects{padding:18px 45px 46px}
.section-heading h2{font-family:'Press Start 2P',monospace;font-size:clamp(16px,2.3vw,27px);line-height:1.7}
.section-heading p{font-family:'Pixelify Sans',monospace;font-size:20px;color:#f2e2fa}
.folder-symbol{color:#da62ff;font-size:42px}
.filter,.search{border:3px solid #a53acb;background:#1b0a2a;clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px)}
.filter{font-size:21px;padding:5px 16px}.search{min-width:275px}.search input{font-size:21px;width:100%}
.project-grid{gap:25px}.project-card{border:4px solid #ca55ed;clip-path:polygon(11px 0,calc(100% - 11px) 0,100% 11px,100% calc(100% - 11px),calc(100% - 11px) 100%,11px 100%,0 calc(100% - 11px),0 11px)}
.cover-link{aspect-ratio:2.35/1}.cover-link img{object-fit:cover}
.card-body{padding:15px 20px}.card-body h3{font-family:'Pixelify Sans',monospace;font-size:30px;font-weight:700}
footer{font-family:'Pixelify Sans',monospace;font-size:24px}
@media(max-width:1100px){.hero{padding:25px 25px 0}.hero h1{font-size:clamp(25px,3.8vw,43px)}.topbar{padding:14px 25px}.topbar nav a{font-size:10px}.intro{font-size:24px}.eyebrow{font-size:19px}.projects{padding:18px 27px 35px}}
@media(max-width:760px){.hero{grid-template-columns:1fr}.hero-copy{padding:12px 0}.hero-art{height:310px;width:100%;background-size:cover}.topbar{gap:10px}.topbar nav a{font-size:9px;padding:10px}.brand{font-size:17px}.social a{width:23px;height:23px}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.search{min-width:0}.btn{font-size:10px}}
@media(max-width:520px){.hero h1{font-size:clamp(21px,7vw,32px)}.hero-art{height:235px}.project-grid{grid-template-columns:1fr}.section-heading h2{font-size:14px}.eyebrow{font-size:16px}.intro{font-size:23px}.btn{width:100%}.topbar nav a{font-size:8px}.projects{padding:15px 17px 30px}.section-divider{margin:0 16px}}

/* V4: Hero integrado sin el rectángulo de la imagen.
   La imagen tiene transparencia progresiva en los bordes; el color de fondo
   y el resplandor continúan fuera de ella. */
.hero{position:relative;isolation:isolate;background:radial-gradient(ellipse 48% 75% at 78% 57%,rgba(95,19,137,.26),transparent 85%)}
.hero-art{background-image: url('/assets/images/hero-scene.png');background-size:100% 100%;background-position:center bottom;background-repeat:no-repeat;background-color:transparent;filter:none;overflow:visible;isolation:isolate}
.hero-art:before{content:'';position:absolute;inset:7% -8% 0 -8%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 55% 66%,rgba(148,36,207,.18),transparent 68%)}
@media(max-width:760px){.hero-art{background-size:100% 100%}}

/* V5 — fondo oscuro, hovers retro y suelo pixelado en esquinas inferiores */
:root{--bg:#0b0412;--panel:#13071d;--line:#df65ff;--purple:#d95aff}
body{background:#07030d}
.site-shell{background:radial-gradient(ellipse at 70% 19%,rgba(54,12,75,.38),transparent 42%),#0b0412;border-color:#cc53f2;padding-bottom:10px}
.hero{background:radial-gradient(ellipse 43% 64% at 76% 50%,rgba(75,17,105,.15),transparent 90%)}
.hero-art{background-color:transparent}
.topbar nav a,.btn,.filter,.project-card,.social a{transition:background .18s ease,color .18s ease,box-shadow .18s ease,filter .18s ease,transform .18s ease,border-color .18s ease}
.topbar nav a{position:relative;border:3px solid transparent;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px)}
.topbar nav a.active,.topbar nav a:hover,.topbar nav a:focus-visible{background:#42115f;border:3px solid #ee7dff;box-shadow:inset 0 0 0 2px #8d2eb9,0 0 14px #c34aff99;color:#fff;transform:translateY(-1px)}
.btn{position:relative;border-color:#e878ff;box-shadow:inset 0 0 0 2px #9d32c0,3px 4px 0 #55166f}
.btn.primary{background:#c94bf5;color:#15071c;box-shadow:inset 0 0 0 2px #ed9aff,4px 4px 0 #6b218d}
.btn.outline{background:#180921;color:#fff}
.btn:hover,.btn:focus-visible{transform:translateY(-4px);border-color:#ffd1ff;filter:brightness(1.12);box-shadow:inset 0 0 0 2px #f8c1ff,0 0 13px #d44aff,0 0 25px #aa28eb99}
.btn:active{transform:translateY(1px)}
.filter:hover,.filter:focus-visible{background:#5c1a7d;border-color:#ed83ff;box-shadow:0 0 12px #b933e777;color:#fff;transform:translateY(-2px)}
.filter.active{background:#d75af8;border-color:#ffc4ff;color:#17081e;box-shadow:0 0 10px #b742ed55}
.project-card:hover,.project-card:focus-within{transform:translateY(-5px);border-color:#f59aff;box-shadow:0 0 18px #c73cff88}
.social a:hover,.social a:focus-visible{color:#e98aff;filter:drop-shadow(0 0 7px #c849ff);transform:translateY(-2px)}
.site-shell:before,.site-shell:after{content:'';position:absolute;z-index:5;pointer-events:none;width:min(31%,390px);height:118px;bottom:0;top:auto;background:url('/assets/images/terrain-corner-v9.png') bottom left/100% 100% no-repeat;image-rendering:pixelated;color:transparent}
.site-shell:before{left:0}.site-shell:after{right:0;left:auto;transform:scaleX(-1)}
footer{position:relative;z-index:6;min-height:110px;align-items:flex-end;padding-bottom:22px;text-shadow:0 0 12px #8e30bc66}
footer .footer-line{background:#d75cf6;height:3px}
@media(max-width:760px){.site-shell:before,.site-shell:after{width:34%;height:75px}footer{min-height:88px;padding-bottom:20px}}
@media(max-width:520px){.site-shell:before,.site-shell:after{height:52px;width:32%}footer{min-height:80px;font-size:14px;gap:8px}footer .footer-line{width:18px}}
@media(prefers-reduced-motion:reduce){.topbar nav a,.btn,.filter,.project-card,.social a{transition:none}}


/* ===== visual-fixes-v6.css ===== */
/* V6 — Pixel UI borders: no clip-path on interactive elements.
   Earlier rules use clip-path on the same node as border, which slices the stroke. */
:root{--v6-edge:#df6cff;--v6-ink:#0a0412;--v6-focus:#f8b9ff}
.site-shell{
 clip-path:none!important; overflow:hidden; border:3px solid #c956ef;
 border-radius:10px; background:radial-gradient(ellipse 48% 34% at 74% 21%,#251035 0%,transparent 85%),#0a0412;
 box-shadow:0 0 0 3px #321044,0 0 25px #6d1f9a30;
}
.site-shell::before,.site-shell::after{bottom:0;z-index:1;opacity:.94}
.topbar{position:relative;z-index:4}
.topbar nav a,.topbar nav a.active,.topbar nav a:hover,.topbar nav a:focus-visible{
 clip-path:none!important; border-radius:8px;box-shadow:none;transform:none;
 border:3px solid transparent;outline:0;transition:background .16s,border-color .16s,box-shadow .16s;
}
.topbar nav a.active,.topbar nav a:hover,.topbar nav a:focus-visible{
 background:#3d1359;border-color:#e879ff;box-shadow:inset 0 0 0 2px #63217f,0 0 11px #c745e466;
}
.topbar nav a:focus-visible{outline:2px solid #ffe2ff;outline-offset:3px}
.btn,.btn.primary,.btn.outline{
 clip-path:none!important;border-radius:9px;position:relative;isolation:isolate;
 border:3px solid #df76fa;box-shadow:inset 0 0 0 2px #8d33ac,0 3px 0 #4e1768;
 filter:none;transform:none;transition:background .17s,border-color .17s,box-shadow .17s,transform .17s;
}
.btn.primary{background:#ce54f1;color:#14071b;box-shadow:inset 0 0 0 2px #f1a7ff,0 3px 0 #6b228d}
.btn.outline{background:#1d0a2b;color:#fff}
.btn:hover,.btn:focus-visible{
 transform:translateY(-2px);filter:none;border-color:#ffd4ff;
 box-shadow:inset 0 0 0 2px #d877f6,0 0 0 2px #742594,0 0 15px #bd39ef88;
}
.btn.primary:hover,.btn.primary:focus-visible{background:#e076ff;color:#14071b}
.btn.outline:hover,.btn.outline:focus-visible{background:#35104b}
.btn:focus-visible{outline:2px solid #fff;outline-offset:4px}
.btn:active{transform:translateY(1px);box-shadow:inset 0 0 0 2px #d877f6}
.filter,.search,.project-card{
 clip-path:none!important;border-radius:8px;overflow:hidden;
}
.filter{border:2px solid #9d42bd;box-shadow:none;transition:background .17s,border-color .17s,box-shadow .17s}
.filter:hover,.filter:focus-visible{transform:none;background:#4c1767;border-color:#e57cff;box-shadow:0 0 9px #ac35db55}
.filter.active{background:#d75af8;color:#1a0820;border-color:#f4b4ff;box-shadow:inset 0 0 0 1px #a839cc}
.search{border:2px solid #a94bca;overflow:visible}
.search:focus-within{border-color:#f3a8ff;box-shadow:0 0 0 2px #662180}
.project-card{border:3px solid #c452e8;box-shadow:none;transition:transform .17s,border-color .17s,box-shadow .17s}
.project-card:hover,.project-card:focus-within{transform:translateY(-3px);border-color:#ed96ff;box-shadow:0 0 12px #b840dd66}
.hero-art{background-color:transparent}
.about,footer{position:relative;z-index:2}
footer{min-height:115px;padding:30px 20px 22px;align-items:flex-end}
.site-shell::before,.site-shell::after{height:102px;width:min(30%,390px)}
@media(max-width:760px){.site-shell::before,.site-shell::after{height:65px;width:29%}footer{min-height:85px}}
@media(max-width:520px){.site-shell::before,.site-shell::after{height:42px;width:28%}footer{min-height:75px}}
@media(prefers-reduced-motion:reduce){.btn,.filter,.project-card,.topbar nav a{transition:none}}


/* ===== terrain-corners-v7.css ===== */
/* V9: genuine raster PNG terrain, no SVG; mirrored corners. */
.site-shell{position:relative;isolation:isolate;overflow:hidden}
.site-shell::before,.site-shell::after{content:""!important;position:absolute!important;top:auto!important;bottom:0!important;width:min(32%,440px)!important;height:150px!important;z-index:5!important;pointer-events:none!important;opacity:1!important;border:0!important;background-image:url('/assets/images/terrain-corner-v9.png')!important;background-repeat:no-repeat!important;background-size:100% 100%!important;background-position:right bottom!important;image-rendering:pixelated!important;filter:none!important}
.site-shell::before{left:0!important;right:auto!important;transform:scaleX(-1)!important}
.site-shell::after{right:0!important;left:auto!important;transform:none!important}
footer{position:relative;z-index:6;min-height:105px!important;padding:26px 18px 20px!important;align-items:flex-end!important;gap:22px}
footer .footer-line{width:clamp(25px,7vw,95px)}
@media(max-width:760px){.site-shell::before,.site-shell::after{width:35%!important;height:100px!important}footer{min-height:90px!important}}
@media(max-width:520px){.site-shell::before,.site-shell::after{width:32%!important;height:65px!important}footer{min-height:70px!important;padding:12px 7px 16px!important;gap:8px;font-size:13px}footer .footer-line{width:20px}}


/* ===== typography-v10.css ===== */
/* V10 — Pixelify Sans para texto de lectura, Press Start 2P para títulos. */
:root { --font-readable: 'Pixelify Sans', system-ui, sans-serif; }
/* Mantener títulos grandes, marca y navegación sin cambios. */
.hero .intro {
  font-family: var(--font-readable);
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 500;
  line-height: 1.27;
  letter-spacing: 0;
  max-width: 520px;
  text-wrap: pretty;
}
.about p, .detail-intro > p, .rich-text,
.detail-section p, .detail-section li, .empty {
  font-family: var(--font-readable);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
}
.about p { font-size: 21px; }
.detail-intro > p, .rich-text, .detail-section p, .detail-section li { font-size: 20px; }
.section-heading p, .chip, .version, .card-bottom,
.search input, .filter, .meta-row, .tags {
  font-family: var(--font-readable);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
}
.search input { font-size: 19px; }
.filter { font-size: 19px; }
.card-body h3 { line-height: 1.16; }
@media (max-width: 760px) { .hero .intro { font-size: 22px; } }
@media (max-width: 520px) { .hero .intro { font-size: 20px; line-height: 1.3; } }


/* ===== readability-v11.css ===== */
/* V11: Corrección efectiva de fuentes y tarjetas. Cargado DESPUÉS de los CSS anteriores. */
:root { --reading-font: 'Chakra Petch', 'Trebuchet MS', Arial, sans-serif; }
/* Letras nítidas y geométricas para lectura. Solo los títulos principales siguen pixelados. */
body .hero .intro, body .hero-copy p.intro,
body .about > p, body .about p:not(.eyebrow),
body .detail-intro > p, body .rich-text, body .detail-section p,
body .detail-section li, body .project-card .card-body h3,
body .project-card .chip, body .project-card .version,
body .project-card .card-arrow, body .search input,
body .filter, body .section-heading > p, body .meta-row,
body .tags, body .empty {
  font-family: var(--reading-font) !important;
  letter-spacing: .01em !important;
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body .hero .intro { font-size: clamp(19px, 1.65vw, 23px) !important; font-weight: 600 !important; line-height: 1.42 !important; max-width: 540px; }
body .about p:not(.eyebrow), body .rich-text, body .detail-section p { font-size: 19px !important; font-weight: 500 !important; line-height: 1.55 !important; }
/* Tarjetas compactas y completas: portada, título y datos siempre visibles. */
body .project-grid { grid-template-columns: repeat(3,minmax(0,1fr)); align-items: stretch; gap: 22px; }
body .project-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; clip-path: none !important; border: 3px solid #bc4bdd; border-radius: 12px; background: #190a25; box-shadow: inset 0 0 0 1px #60227c; }
body .project-card:hover, body .project-card:focus-within { border-color: #e883ff; box-shadow: 0 0 14px #b83de566, inset 0 0 0 1px #9c43bb; }
body .project-card .cover-link { aspect-ratio: 16/9; flex-shrink: 0; overflow: hidden; border-bottom: 2px solid #7d339a; }
body .project-card .cover-link img { width: 100%; height: 100%; object-fit: cover; }
body .project-card .card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; gap: 14px; }
body .project-card .card-body h3 { font-size: clamp(18px, 1.5vw, 23px) !important; font-weight: 700 !important; line-height: 1.25 !important; min-height: 0 !important; margin: 0 !important; overflow-wrap: anywhere; }
body .project-card .card-bottom { margin-top: auto; gap: 8px; min-width: 0; }
body .project-card .chip, body .project-card .version { font-size: 15px !important; font-weight: 600 !important; line-height: 1.3; }
body .project-card .card-arrow { font-size: 20px !important; }
@media (max-width: 900px) { body .project-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px) { body .project-grid { grid-template-columns: minmax(0,1fr); } body .project-card .card-body h3 { font-size: 21px !important; } }


/* ===== layout-v12.css ===== */
/* V12 — ajustes visuales de navegación y tarjetas */
/* La fuente de navegación anterior dibujaba la í minúscula demasiado baja. */
body .topbar nav a {
  font-family: 'Chakra Petch', 'Trebuchet MS', sans-serif !important;
  font-size: clamp(15px, 1.35vw, 19px) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .055em;
  line-height: 1.35;
}
/* La etiqueta Sobre mí de la sección utiliza el mismo alfabeto y altura. */
body .about .eyebrow {
  font-family: 'Chakra Petch', 'Trebuchet MS', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  font-size: 19px !important;
  letter-spacing: .07em;
  line-height: 1.35;
}
/* Las imágenes reales son panorámicas (aprox. 2.44:1); 16:9 las recortaba. */
body .project-grid { align-items: start; }
body .project-card { border: 2px solid #b74cdd; border-radius: 10px; background: #180b24; box-shadow: none; }
body .project-card .cover-link {
  aspect-ratio: 2.44 / 1 !important;
  height: auto !important;
  display: block;
  border-bottom: 2px solid #8034a2;
  background: #180b24;
}
body .project-card .cover-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center;
}
body .project-card .card-body { padding: 13px 16px 14px; gap: 12px; min-height: 104px; }
body .project-card .card-body h3 { font-family: 'Chakra Petch', sans-serif !important; font-size: 21px !important; font-weight: 700; line-height: 1.25; }
body .project-card .card-bottom { margin-top: auto; }
body .project-card:hover { transform: translateY(-3px); }
@media (max-width: 760px) { body .topbar nav a { font-size: 15px !important; } }
@media (max-width: 520px) { body .topbar nav a { font-size: 13px !important; letter-spacing: 0; } }


/* ===== visual-v13.css ===== */
/* V13 — navegación pixel ancha y portadas sin doble marco */
/* La tipografía del título «Hola, soy Alberto35M» es Press Start 2P. */
body .topbar nav a {
  font-family: 'Press Start 2P', monospace !important;
  font-weight: 400 !important;
  font-size: clamp(9px, .82vw, 12px) !important;
  letter-spacing: 0 !important;
  line-height: 1.65 !important;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Un solo borde para cada tarjeta. La imagen PNG también fue limpiada. */
body .project-card {
  border: 2px solid #cb56ed !important;
  box-shadow: none !important;
  overflow: hidden;
}
body .project-card .cover-link {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  aspect-ratio: 2.44 / 1 !important;
}
body .project-card .cover-link img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border: 0 !important;
  box-shadow: none !important;
}
body .project-card .card-body { border: 0 !important; }
body .project-card:hover, body .project-card:focus-within {
  border-color: #e992ff !important;
  box-shadow: 0 0 14px #bb42e355 !important;
}
@media (max-width: 760px) {
  body .topbar nav a { font-size: 9px !important; padding: 9px 8px !important; }
}
@media (max-width: 420px) {
  body .topbar nav { gap: 3px !important; }
  body .topbar nav a { font-size: 7px !important; padding: 8px 5px !important; }
}


/* ===== discord-v14.css ===== */
/* V14: icono de Discord pixel art en el boton Comunidad */
.actions .btn .discord-pixel-icon {
  display:block; width:26px; height:26px; flex:0 0 26px;
  object-fit:contain; image-rendering:pixelated;
}
.actions .btn.outline {gap:11px;}
@media(max-width:520px){.actions .btn .discord-pixel-icon{width:23px;height:23px;flex-basis:23px;}}


/* ===== visual-v15.css ===== */
/* V15: icono pixel art y tipografia ancha en subtitulo de proyectos */
.projects-folder-icon { width:43px; height:36px; object-fit:contain; image-rendering:pixelated; vertical-align:middle; margin-right:14px; flex-shrink:0; }
.section-heading h2 {display:flex; align-items:center; gap:2px;}
.section-heading > p {font-family:'Press Start 2P',monospace !important; font-size:clamp(9px,0.86vw,12px) !important; line-height:1.9 !important; letter-spacing:0 !important; text-transform:uppercase; color:#f4d9ff;}
@media(max-width:1100px){.section-heading>p{display:block;font-size:9px !important;}}
@media(max-width:750px){.section-heading{align-items:flex-start;flex-direction:column;gap:4px}.section-heading>p{display:block;font-size:8px !important}.projects-folder-icon{width:35px;height:30px;margin-right:9px}}


/* ===== cards-v18.css ===== */
/* V18: compact, readable project cards; intentionally overrides legacy card styles. */
body .project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; align-items:stretch; }
body .project-card { display:flex; flex-direction:column; overflow:hidden; border:2px solid #bd55e1; border-radius:12px; background:#170a23; box-shadow:none; clip-path:none !important; min-width:0; }
body .project-card:hover,body .project-card:focus-within { transform:translateY(-3px); border-color:#eb91ff; box-shadow:0 0 14px #ab36d755; }
body .project-card .cover-link { display:block; aspect-ratio:16/9; width:100%; border:0 !important; border-bottom:1px solid #73308b !important; overflow:hidden; background:#170a23; }
body .project-card .cover-link img { display:block; width:100%; height:100%; object-fit:cover; border:0 !important; border-radius:0 !important; }
body .project-card .card-body { display:flex; flex-direction:column; flex:1; gap:12px; padding:17px 17px 18px; min-height:0; border:0 !important; }
body .project-card .card-body h3 { margin:0 !important; min-height:0 !important; font-family:'Chakra Petch',sans-serif !important; font-size:22px !important; font-weight:700 !important; line-height:1.2 !important; }
body .project-card .card-description { margin:0; color:#d1bfdc; font-family:'Chakra Petch',sans-serif !important; font-size:15px !important; font-weight:500; line-height:1.45; min-height:3em; letter-spacing:0; }
body .project-card .card-meta { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:auto; }
body .project-card .card-category { display:inline-flex; align-items:center; padding:5px 12px; border:1px solid #b658df; border-radius:100px; background:#321340; color:#f1d8ff; font:600 13px/1.25 'Chakra Petch',sans-serif; }
body .project-card .card-version { font:600 13px/1.3 'Chakra Petch',sans-serif; color:#cbb2d8; white-space:nowrap; }
body .project-card .card-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:3px; }
body .project-card .card-action { display:inline-flex; justify-content:center; align-items:center; gap:6px; padding:10px 8px; min-width:0; border:1px solid #bd55e1; border-radius:6px; text-align:center; font:700 13px/1.25 'Chakra Petch',sans-serif !important; text-decoration:none; transition:background .18s,border-color .18s,box-shadow .18s; }
body .project-card .card-more { background:#b951df; color:#16091e; }
body .project-card .card-more:hover { background:#dc86fa; box-shadow:0 0 12px #be52e866; }
body .project-card .card-download { background:#251030; color:#f8eaff; }
body .project-card a.card-download:hover { background:#3b1950; border-color:#e38aff; }
body .project-card .unavailable { color:#9c86a9; border-color:#5b356d; background:#1e1126; cursor:not-allowed; font-size:12px !important; }
@media(max-width:1000px){body .project-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:620px){body .project-grid{grid-template-columns:1fr;}body .project-card .card-description{min-height:0;}}


/* ===== cards-v19.css ===== */
/* V19: Final, isolated card layout; load after all previous styles. */
.project-grid .project-card-v19 {
  display:flex !important; flex-direction:column !important; min-width:0 !important;
  overflow:hidden !important; background:#16091f !important;
  border:2px solid #c05de5 !important; border-radius:12px !important;
  clip-path:none !important; box-shadow:none !important;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease !important;
}
.project-grid .project-card-v19:hover {transform:translateY(-3px) !important;border-color:#ed9dff !important;box-shadow:0 0 17px #a53ac744 !important;}
.project-grid .project-card-v19 .cover-link { display:block !important; flex:none !important; aspect-ratio:16/9 !important; width:100% !important; height:auto !important; overflow:hidden !important; border:0 !important; border-bottom:1px solid #603071 !important; background:#1c0b28 !important; padding:0 !important; margin:0 !important; }
.project-grid .project-card-v19 .cover-link img {display:block !important;width:100% !important;height:100% !important;object-fit:cover !important;border:0 !important;box-shadow:none !important;border-radius:0 !important;}
.project-grid .project-card-v19 .card-body {display:flex !important; flex:1 !important; flex-direction:column !important; gap:13px !important; padding:17px !important; min-height:220px !important; border:0 !important; background:transparent !important;}
.project-grid .project-card-v19 .card-body h3 {font-family:'Chakra Petch',sans-serif !important;font-size:21px !important;line-height:1.25 !important;font-weight:700 !important;min-height:0 !important;margin:0 !important;letter-spacing:0 !important;}
.project-grid .project-card-v19 .card-body h3 a {color:#fff5ff !important;text-decoration:none !important;}
.project-grid .project-card-v19 .card-description {display:block !important;visibility:visible !important;opacity:1 !important;max-height:none !important;min-height:43px !important;margin:0 !important;color:#d7c5e1 !important;font:500 15px/1.45 'Chakra Petch',sans-serif !important;letter-spacing:0 !important;text-transform:none !important;}
.project-grid .project-card-v19 .card-meta {display:flex !important;align-items:center !important;justify-content:space-between !important;gap:10px !important;margin-top:auto !important;}
.project-grid .project-card-v19 .card-category {display:inline-flex !important;align-items:center !important;padding:5px 12px !important;border:1px solid #ba63dd !important;border-radius:999px !important;background:#32133f !important;color:#f3d8ff !important;font:600 13px/1.3 'Chakra Petch',sans-serif !important;}
.project-grid .project-card-v19 .card-version {color:#cbb6d9 !important;font:600 13px/1.3 'Chakra Petch',sans-serif !important;}
.project-grid .project-card-v19 .card-actions {display:grid !important;grid-template-columns:1fr 1fr !important;gap:10px !important;margin:2px 0 0 !important;}
.project-grid .project-card-v19 .card-action {display:flex !important;align-items:center !important;justify-content:center !important;gap:6px !important;min-width:0 !important;padding:11px 7px !important;text-align:center !important;text-decoration:none !important;border-radius:7px !important;border:1px solid #c05de5 !important;font:700 13px/1.3 'Chakra Petch',sans-serif !important;white-space:nowrap !important;}
.project-grid .project-card-v19 .card-more {background:#c05de5 !important;color:#1b0a26 !important;}
.project-grid .project-card-v19 .card-more:hover {background:#e194fc !important;}
.project-grid .project-card-v19 .card-download {background:#271034 !important;color:#f5e5ff !important;}
.project-grid .project-card-v19 a.card-download:hover {background:#49215e !important;}
.project-grid .project-card-v19 .unavailable {opacity:.65 !important;cursor:default !important;border-color:#644075 !important;font-size:12px !important;}
.project-grid .project-card-v19[hidden] {display:none !important;}
@media(max-width:900px){body .project-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}}
@media(max-width:620px){body .project-grid{grid-template-columns:minmax(0,1fr) !important;}.project-grid .project-card-v19 .card-body{min-height:0 !important;}}