/* qfadesign — páginas internas (acerca, portfolio, herramientas, jueguitos, contacto) */
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:var(--f);font-weight:400;color:#fff;line-height:1.4;min-height:100vh;display:flex;flex-direction:column;background:var(--fondo)}
/* fondo vivo: luces azules + grano */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--g,radial-gradient(60vw 45vw at 88% 6%,rgba(120,190,255,.5),transparent 62%),radial-gradient(50vw 40vw at -5% 48%,rgba(3,40,120,.75),transparent 60%),radial-gradient(45vw 35vw at 98% 78%,rgba(70,160,255,.35),transparent 60%),linear-gradient(#0a5cc0,#0847a3))}
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.14;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
main{position:relative;z-index:1;flex:1;max-width:1240px;width:100%;margin:auto;padding:0 clamp(20px,4vw,40px) clamp(20px,3vw,36px)}

/* título gigante */
.ph{padding:clamp(40px,6vw,88px) 0 0}
h1{font-weight:900;font-style:italic;font-size:clamp(30px,11.5vw,172px);line-height:.9;letter-spacing:-.03em;font-family:var(--fh)}
.hueco{color:transparent;-webkit-text-stroke:clamp(1.5px,.32vw,4px) #fff}
.lead{font-size:clamp(18px,1.9vw,26px);max-width:620px;margin-top:clamp(16px,2.2vw,28px)}

/* cinta inclinada */
.tira{position:relative;z-index:2;margin:clamp(34px,5vw,72px) -6vw;transform:rotate(-2deg);background:#fff;color:var(--azul-f);overflow:hidden;white-space:nowrap;padding:12px 0;box-shadow:0 12px 30px rgba(0,0,0,.22)}
.tira div{display:inline-block;animation:mover 30s linear infinite;font-weight:900;font-style:italic;font-size:clamp(20px,2.4vw,30px);font-family:var(--fh)}
.tira span{margin:0 .6em}
@keyframes mover{to{transform:translateX(-50%)}}

/* vidrio */
.vid{padding:clamp(20px,2.6vw,32px);border-radius:28px;background:rgba(255,255,255,.13);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border:1px solid rgba(255,255,255,.42);box-shadow:0 20px 50px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.45)}
h2{font-weight:900;font-style:italic;line-height:1;font-family:var(--fh)}
.btn{display:inline-block;text-align:center;font-family:var(--fp);text-transform:uppercase;font-size:14px;padding:14px 28px;border-radius:14px;background:#fff;color:var(--azul-f);border:0;cursor:pointer}
.btn.negro{background:var(--nav);color:#fff}
.sec{margin-top:clamp(56px,8vw,120px)}

/* ACERCA */
.ah{position:relative;height:clamp(540px,66vw,800px);margin-top:clamp(10px,3vw,40px)}
.ah-bg{position:absolute;left:0;right:0;top:2%;text-align:center;font-size:clamp(80px,21vw,330px);line-height:.85;letter-spacing:-.04em;white-space:nowrap}
.ah-foto{position:absolute;left:50%;bottom:0;height:94%;width:auto;max-width:none;transform:translateX(-50%);filter:drop-shadow(0 24px 40px rgba(0,0,0,.4))}
.ah-a{position:absolute;left:0;bottom:6%;width:min(380px,32%);z-index:2}
.ah-a h2{font-size:clamp(22px,2.3vw,32px)}.ah-a p{margin-top:12px;font-size:clamp(15px,1.3vw,18px)}
.ah-chips{position:absolute;right:0;bottom:6%;z-index:2;display:grid;gap:12px;list-style:none;padding:0}
.ah-chips li{padding:12px 22px;border-radius:99px;font-weight:900;font-style:italic;font-size:clamp(16px,1.7vw,24px);background:rgba(255,255,255,.16);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.5);text-align:center;font-family:var(--fh)}
.sec>h2,.cta h2{font-size:clamp(34px,5.5vw,76px)}
.sec>h2{margin-bottom:clamp(20px,3vw,36px)}
.qh{display:grid;grid-template-columns:repeat(6,1fr);gap:22px}
.qh .vid{grid-column:span 2;transition:transform .4s cubic-bezier(.2,.8,.2,1),background .3s;min-height:290px;display:flex;flex-direction:column;justify-content:space-between;gap:26px}
.qh .vid:hover{transform:translateY(-8px) rotate(-.6deg);background:rgba(255,255,255,.2)}
.qh h3{font-weight:900;font-style:italic;font-size:clamp(32px,3.6vw,52px);line-height:.95;color:#fff;overflow-wrap:anywhere;font-family:var(--fh)}
.qh p{font-size:clamp(15px,1.25vw,18px);max-width:52ch}
.foto-band{position:relative;border-radius:36px;overflow:hidden;aspect-ratio:16/8;background:var(--nav)}
.foto-band>img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
.foto-band .vid{position:absolute;left:clamp(14px,2.5vw,32px);bottom:clamp(14px,2.5vw,32px);max-width:min(500px,86%);background:rgba(255,255,255,.34);color:#06162e}
.foto-band p{font-size:clamp(16px,1.6vw,22px);font-weight:700;font-style:italic;line-height:1.25}
.cta{text-align:center}.cta h2{font-size:clamp(30px,5vw,68px);max-width:14ch;margin:0 auto}.cta .fila{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:28px}

/* PORTFOLIO */
.filtros{display:flex;gap:10px;flex-wrap:wrap;margin:clamp(28px,4vw,48px) 0 26px}
.chip{font-family:var(--fp);text-transform:uppercase;font-size:13px;padding:11px 22px;border-radius:99px;border:2px solid #fff;background:transparent;color:#fff;cursor:pointer;transition:background .2s,color .2s}
.chip[aria-pressed=true],.chip:hover{background:#fff;color:var(--azul-f)}
.pjs{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(230px,24vw,320px);gap:22px}
.pj{position:relative;grid-column:span 2;border-radius:28px;overflow:hidden;display:block;background:var(--nav);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.pj.w{grid-column:span 3}
.pjs.f .pj{grid-column:span 3}.pjs.f .pj.solo{grid-column:span 6}
.pj>img{width:100%;height:100%;object-fit:cover;transition:scale .8s cubic-bezier(.2,.8,.2,1)}
.pj:hover>img{scale:1.07}.pj:hover{transform:translateY(-6px);box-shadow:0 26px 50px rgba(0,0,0,.35)}
.pj .et{position:absolute;left:14px;right:auto;max-width:calc(100% - 28px);bottom:14px;padding:14px 18px;border-radius:20px;background:rgba(255,255,255,.72);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(255,255,255,.8);color:#06214d}
.pj h3{font-weight:900;font-style:italic;font-size:22px;line-height:1.1;font-family:var(--fh)}.pj p{font-size:15px;margin-top:2px}
.pj[hidden]{display:none}

/* JUEGUITOS: portadas chicas, las 3 en fila */
.juegos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,26px);margin-top:0}
.jg{display:block}
.jg-img{position:relative;display:block;aspect-ratio:3/2;transition:transform .4s cubic-bezier(.2,.8,.2,1),filter .3s;filter:drop-shadow(0 14px 26px rgba(0,0,0,.28))}
.jg-img img{width:100%;height:100%;object-fit:cover}
.jg:hover .jg-img,.jg:focus-visible .jg-img{transform:translateY(-6px) rotate(-.8deg)}
.jg h2{font-size:clamp(18px,1.9vw,26px);margin-top:16px}
.jg p{font-size:clamp(14px,1.2vw,17px);margin-top:4px;opacity:.9}
@media(max-width:640px){.juegos{grid-template-columns:1fr;max-width:420px}}

/* HERRAMIENTAS */
.hgs{display:grid;gap:14px;margin-top:clamp(28px,4vw,48px)}
.hg{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:1fr 1.2fr auto;gap:24px;align-items:center;padding:clamp(20px,2.6vw,34px) clamp(22px,3vw,40px);border-radius:28px;background:rgba(255,255,255,.13);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.42);transition:color .35s}
.hg::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;translate:0 101%;transition:translate .45s cubic-bezier(.2,.8,.2,1)}
.hg:hover,.hg:focus-visible{color:var(--azul-f)}.hg:hover::before,.hg:focus-visible::before{translate:0 0}
.hg h2{font-size:clamp(28px,4vw,56px)}.hg p{font-size:clamp(15px,1.3vw,19px)}
.fl{width:52px;height:52px;border-radius:50%;border:2px solid currentColor;display:grid;place-items:center;font-weight:900;font-size:22px;transition:rotate .35s;font-family:var(--fh)}
.hg:hover .fl{rotate:-45deg}

/* CONTACTO */
.cn{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(24px,5vw,72px);align-items:start;margin-top:clamp(28px,4vw,48px)}
.cn .lead{margin-top:0}
.mail{display:inline-block;margin-top:26px;font-weight:900;font-style:italic;font-size:clamp(22px,2.6vw,36px);text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:3px;word-break:break-all;font-family:var(--fh)}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.pills a{padding:11px 22px;border-radius:99px;border:2px solid #fff;font-weight:900;font-style:italic;transition:background .2s,color .2s;font-family:var(--fh)}.pills a:hover{background:#fff;color:var(--azul-f)}
.form{display:grid;gap:20px}
.form label{display:grid;gap:8px;font-weight:700;font-style:italic;font-size:18px}
.form input,.form textarea{width:100%;font:inherit;font-weight:400;font-style:normal;padding:14px 16px;border-radius:14px;border:2px solid transparent;background:#fff;color:#06214d}
.form input:focus-visible,.form textarea:focus-visible{outline:3px solid #000;outline-offset:2px;box-shadow:0 0 0 6px #fff}
.form textarea{min-height:160px;resize:vertical}.form ::placeholder{color:#4a5a75;opacity:1}
.form button{justify-self:start;font-size:15px}.aviso{font-size:15px;min-height:1.4em}

@media(max-width:980px) and (min-width:761px){.qh .vid{grid-column:span 3}}
@media(max-width:860px){.cn{grid-template-columns:1fr}.hg{grid-template-columns:1fr auto}.hg p{grid-column:1/2;grid-row:2}}
@media(max-width:760px){
 .ah{height:auto;display:grid;gap:16px;padding-top:0}.ah-bg{position:static;font-size:21vw}
 .ah>*{min-width:0}
 .ah-foto{position:static;transform:none;height:auto;width:78%;justify-self:center;margin-top:-6vw}
 .ah-a{position:static;width:auto}.ah-chips{position:static;display:flex;flex-wrap:wrap;gap:10px}.ah-chips li{padding:10px 18px}
.qh .vid,.qh .vid:nth-child(n+4){grid-column:span 6;min-height:0}
 .foto-band{aspect-ratio:4/5}.foto-band>img{object-position:78% 60%}
 .pjs{grid-template-columns:1fr;grid-auto-rows:clamp(220px,62vw,300px)}
 .pj,.pj.w,.pjs.f .pj,.pjs.f .pj.solo{grid-column:auto}
}
@media(prefers-reduced-motion:reduce){.tira div{animation:none}html{scroll-behavior:auto}}

/* PÁGINA DE PROYECTO */
.volver{display:inline-block;font-weight:900;font-style:italic;font-size:clamp(15px,1.4vw,18px);padding:10px 20px;border-radius:99px;border:2px solid #fff;transition:background .2s,color .2s;font-family:var(--fh)}
.volver:hover{background:#fff;color:var(--azul-f)}
.pr-h{padding-top:clamp(24px,3.5vw,48px)}
.pr-t{font-size:clamp(40px,10.5vw,150px);margin-top:clamp(18px,2.6vw,32px);overflow-wrap:anywhere}
.pr-portada,.pr-gal figure{border-radius:clamp(18px,2.4vw,34px);overflow:hidden;background:var(--nav);box-shadow:0 24px 60px rgba(0,0,0,.28)}
.pr-portada{margin-top:clamp(26px,4vw,48px)}
.zoom{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;line-height:0}
.zoom img{width:100%;height:auto}
.pr-info{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(14px,2vw,26px);margin-top:clamp(14px,2vw,26px)}
.pr-info h2{font-size:clamp(22px,2.3vw,32px);margin-bottom:14px}
.pr-info p{font-size:clamp(16px,1.4vw,20px);max-width:62ch}
.pr-tags{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0}
.pr-tags li{padding:9px 18px;border-radius:99px;font-weight:900;font-style:italic;font-size:15px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.5);font-family:var(--fh)}
.pr-gal{display:grid;gap:clamp(14px,2vw,26px);margin-top:clamp(14px,2vw,26px)}
/* lightbox */
.lb{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;color:#fff}
.lb::backdrop{background:rgba(3,14,36,.92);backdrop-filter:blur(6px)}
.lb[open]{display:grid;place-items:center}
.lb img{max-width:92vw;max-height:88vh;width:auto;height:auto;border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lb button{position:absolute;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.16);color:#fff;font:900 22px "articulat-cf",sans-serif;cursor:pointer;display:grid;place-items:center}
.lb button:hover{background:#fff;color:var(--azul-f)}
.lb-x{top:16px;right:16px}.lb-p{left:16px;top:50%;translate:0 -50%}.lb-n{right:16px;top:50%;translate:0 -50%}
@media(max-width:760px){.pr-info{grid-template-columns:1fr}.lb-p,.lb-n{top:auto;bottom:16px;translate:none}}
.pr-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000}

/* HERRAMIENTAS: tarjetas con lista de enlaces */
.hl{display:grid;grid-template-columns:1fr 1.2fr;gap:18px 24px;align-items:center;padding:clamp(20px,2.6vw,34px) clamp(22px,3vw,40px);border-radius:28px;background:rgba(255,255,255,.13);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.42);animation:pop .8s cubic-bezier(.2,.8,.2,1) .5s both}
.hl h2{font-size:clamp(28px,4vw,56px)}.hl p{font-size:clamp(15px,1.3vw,19px);margin-top:8px}
.enlaces{display:flex;flex-wrap:wrap;gap:10px}
.enlaces a{padding:11px 22px;border-radius:99px;border:2px solid #fff;font-weight:900;font-style:italic;font-size:clamp(15px,1.4vw,18px);transition:background .2s,color .2s,transform .2s;font-family:var(--fh)}
.enlaces a:hover,.enlaces a:focus-visible{background:#fff;color:var(--azul-f);transform:translateY(-2px)}
@media(max-width:860px){.hl{grid-template-columns:1fr}}

/* FONDOS POR PÁGINA: mismo azul base, distinta composición de luces */
body.f-acerca{--g:radial-gradient(65vw 50vw at 8% 4%,rgba(110,205,255,.55),transparent 62%),radial-gradient(55vw 45vw at 100% 60%,rgba(2,30,100,.8),transparent 62%),radial-gradient(40vw 30vw at 40% 100%,rgba(60,140,255,.35),transparent 60%),linear-gradient(#0a5cc0,#0847a3)}
body.f-portfolio{--g:radial-gradient(60vw 45vw at 88% 6%,rgba(120,190,255,.5),transparent 62%),radial-gradient(50vw 40vw at -5% 48%,rgba(3,40,120,.75),transparent 60%),radial-gradient(45vw 35vw at 98% 78%,rgba(70,160,255,.35),transparent 60%),linear-gradient(#0a5cc0,#0847a3)}
body.f-herramientas{--g:radial-gradient(65vw 50vw at 100% 35%,rgba(105,120,255,.62),transparent 64%),radial-gradient(60vw 45vw at 0% 100%,rgba(70,185,255,.45),transparent 62%),radial-gradient(45vw 35vw at 20% 0%,rgba(2,30,100,.72),transparent 60%),linear-gradient(#0a5cc0,#0847a3)}
body.f-jueguitos{--g:radial-gradient(70vw 52vw at 50% -8%,rgba(60,230,255,.6),transparent 64%),radial-gradient(55vw 42vw at 100% 92%,rgba(40,120,255,.55),transparent 62%),radial-gradient(45vw 35vw at -5% 60%,rgba(2,30,100,.75),transparent 60%),linear-gradient(#0a5cc0,#0847a3)}
body.f-contacto{--g:radial-gradient(70vw 50vw at 50% 108%,rgba(130,200,255,.5),transparent 62%),radial-gradient(50vw 40vw at 0% 10%,rgba(2,30,100,.75),transparent 60%),radial-gradient(40vw 30vw at 100% 25%,rgba(70,160,255,.35),transparent 60%),linear-gradient(#0a5cc0,#0847a3)}
body.f-arbol{--g:radial-gradient(85vw 62vw at 95% 4%,rgba(232,120,60,.72),transparent 64%),radial-gradient(55vw 45vw at -5% 60%,rgba(3,40,120,.8),transparent 60%),radial-gradient(50vw 35vw at 100% 92%,rgba(150,170,172,.4),transparent 62%),linear-gradient(#0a5cc0,#0847a3)}
body.f-bleko{--g:radial-gradient(85vw 62vw at 4% 4%,rgba(245,100,70,.66),transparent 64%),radial-gradient(55vw 45vw at 105% 55%,rgba(3,40,120,.8),transparent 60%),radial-gradient(50vw 35vw at 35% 100%,rgba(250,240,228,.3),transparent 62%),linear-gradient(#0a5cc0,#0847a3)}
body.f-dulcemente{--g:radial-gradient(85vw 62vw at 94% 3%,rgba(245,120,150,.66),transparent 64%),radial-gradient(55vw 45vw at -5% 62%,rgba(3,40,120,.8),transparent 60%),radial-gradient(50vw 35vw at 70% 100%,rgba(255,210,185,.3),transparent 62%),linear-gradient(#0a5cc0,#0847a3)}
body.f-miga{--g:radial-gradient(80vw 58vw at 6% 3%,rgba(140,205,255,.6),transparent 64%),radial-gradient(65vw 50vw at 104% 72%,rgba(95,38,14,.75),transparent 64%),radial-gradient(50vw 35vw at 20% 100%,rgba(3,40,120,.8),transparent 60%),linear-gradient(#0a5cc0,#0847a3)}
body.f-ros{--g:radial-gradient(85vw 62vw at 94% 4%,rgba(125,65,255,.72),transparent 64%),radial-gradient(55vw 42vw at -5% 98%,rgba(95,235,45,.32),transparent 62%),radial-gradient(55vw 45vw at -5% 40%,rgba(3,40,120,.75),transparent 60%),linear-gradient(#0a5cc0,#0847a3)}
body.f-trazo{--g:radial-gradient(85vw 60vw at 50% -8%,rgba(40,205,255,.68),transparent 64%),radial-gradient(55vw 45vw at 104% 72%,rgba(2,30,100,.85),transparent 62%),radial-gradient(50vw 35vw at -5% 85%,rgba(60,140,255,.4),transparent 60%),linear-gradient(#0a5cc0,#0847a3)}
body.f-f1{--g:radial-gradient(85vw 62vw at 95% 4%,rgba(235,40,55,.62),transparent 64%),radial-gradient(55vw 45vw at -5% 52%,rgba(2,25,90,.9),transparent 60%),radial-gradient(50vw 35vw at 92% 94%,rgba(70,160,255,.36),transparent 62%),linear-gradient(#0a5cc0,#0847a3)}
body.f-e404{--g:radial-gradient(60vw 45vw at 50% 0%,rgba(120,190,255,.45),transparent 62%),radial-gradient(50vw 40vw at 0% 90%,rgba(3,40,120,.75),transparent 60%),linear-gradient(#0a5cc0,#0847a3)}
/* FIN FONDOS */