@font-face { font-family: 'Comico'; src: url('./assets/Comico-Regular.otf') format('opentype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Crosner'; src: url('./assets/Crosner-Regular.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
:root { color-scheme: dark; --ink:#070617; --violet:#a984ff; --cyan:#72eaff; --white:#f7f4ff; }
* { box-sizing: border-box; }
html { min-width:320px; min-height:100%; background:var(--ink); scroll-behavior:smooth; }
body { min-width:320px; min-height:100vh; min-height:100svh; margin:0; overflow-x:hidden; color:var(--white); font-family:'Comico',Arial,sans-serif; }
body.modal-open { overflow:hidden; }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; }
img,svg { max-width:100%; }
[hidden] { display:none !important; }
:focus-visible { outline:2px solid #c8f7ff; outline-offset:4px; }

/* Inicio: escena CRT y menú de navegación */
.home-page { position:relative; isolation:isolate; display:flex; min-height:100vh; min-height:100svh; flex-direction:column; overflow:hidden; padding:clamp(1rem,3vw,2.4rem) clamp(1rem,4vw,4rem); background-color:#061344; background-image:url('./assets/fondiux.png'); background-position:center; background-size:cover; background-repeat:no-repeat; }
.home-background-video { position:fixed; inset:0; z-index:0; display:block; width:100vw; height:100vh; height:100svh; object-fit:cover; object-position:center; pointer-events:none; }
.home-page::before,.home-page::after { position:absolute; inset:0; z-index:0; content:''; pointer-events:none; }
.home-page::before { z-index:1; background:linear-gradient(90deg,rgba(2,5,30,.72),transparent 44%,rgba(3,4,30,.3)),radial-gradient(ellipse at 50% 50%,transparent 28%,rgba(2,4,25,.4)); }
.home-page::after { opacity:.18; background:repeating-linear-gradient(0deg,rgba(255,255,255,.12) 0 1px,transparent 1px 4px); mix-blend-mode:screen; }
.home-header,.home-layout { position:relative; z-index:2; }
.home-header { display:flex; align-items:center; min-height:2.5rem; }
.home-brand { color:#f5f8ff; font:1.65rem/1 'Crosner','Comico',sans-serif; letter-spacing:.035em; text-decoration:none; text-shadow:2px 2px 0 #203476,0 0 14px rgba(115,211,255,.48); }
.home-layout { position:relative; display:block; flex:1; width:100%; margin:0 auto; pointer-events:none; }
.home-intro { position:absolute; top:50%; left:0; width:min(31%,28rem); max-width:28rem; padding:clamp(1rem,2vw,1.5rem); border-left:2px solid rgba(166,146,255,.72); background:linear-gradient(90deg,rgba(4,5,32,.58),transparent); transform:translateY(-50%); }
.home-intro h1 { margin:0; color:#fff; font:clamp(3rem,5.2vw,6rem)/.98 'Crosner','Comico',sans-serif; letter-spacing:.005em; text-shadow:2px 3px 0 rgba(29,17,87,.95),0 0 26px rgba(145,105,255,.42); text-wrap:balance; }
.home-intro p { max-width:23rem; margin:1rem 0 0; color:#e9f4ff; font:clamp(1rem,1.25vw,1.12rem)/1.65 'Comico',sans-serif; text-shadow:0 2px 8px #000; }
.home-menu { position:absolute; top:50%; right:0; z-index:3; display:grid; grid-auto-rows:4.55rem; gap:.7rem; width:min(25%,31rem); transform:translateY(-50%) rotate(-2deg); pointer-events:auto; }
.home-link { position:relative; display:flex; box-sizing:border-box; align-items:center; justify-content:space-between; gap:.6rem; width:100%; height:4.55rem; min-width:0; min-height:0; padding:.45rem 1.25rem .45rem 1.65rem; border:1px solid rgba(255,255,255,.94); color:#1c3154; background:linear-gradient(180deg,#f7fbff 0%,#dfeaf8 43%,#b7cae4 50%,#e7f0fc 100%); box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 rgba(32,56,93,.45),0 5px 13px rgba(0,0,25,.48); clip-path:polygon(2% 12%,96% 0,100% 80%,8% 100%,0 72%); font:clamp(1.15rem,1.8vw,1.7rem)/1.2 'Crosner','Comico',sans-serif; letter-spacing:.015em; text-decoration:none; transition:transform 180ms ease,filter 180ms ease,color 180ms ease,background 180ms ease; }
.home-link:nth-child(odd) { transform:translateX(.65rem) rotate(-.8deg); }
.home-link:nth-child(even) { transform:translateX(-.2rem) rotate(.7deg); }
.home-link b { color:inherit; font:1.45rem/1 Arial,sans-serif; opacity:0; text-shadow:0 0 8px rgba(95,226,255,.9); transition:opacity 160ms ease,transform 180ms ease; }
.home-link:hover,.home-link:focus-visible { color:#fff; background:linear-gradient(180deg,transparent 35%,rgba(78,226,255,.42) 55%,transparent 78%),linear-gradient(100deg,#32119b 0%,#7024c9 34%,#ce55e5 58%,#edf5ff 100%); border-color:rgba(237,238,255,.98); box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -2px 0 rgba(85,188,255,.5),0 0 18px rgba(193,100,255,.72),0 0 28px rgba(64,213,255,.3); filter:drop-shadow(0 0 13px rgba(181,151,255,.68)); outline:none; }
.home-link:hover b,.home-link:focus-visible b { opacity:1; }
.home-link:hover b,.home-link:focus-visible b { transform:translateX(-.15rem); }
.home-link:nth-child(odd):hover,.home-link:nth-child(odd):focus-visible { transform:translateX(1rem) scale(1.025); }
.home-link:nth-child(even):hover,.home-link:nth-child(even):focus-visible { transform:translateX(.25rem) scale(1.025); }
.home-link:active { transform:scale(.98); }
.home-scene { position:absolute; top:50%; left:50%; z-index:1; width:min(100vw,160svh); height:min(62.5vw,100svh); transform:translate(-50%,-50%); pointer-events:none; }
.home-tv-screen { position:absolute; top:41.5%; left:31.8%; z-index:2; width:36.5%; height:42.2%; overflow:hidden; border-radius:5%/7%; background:transparent; box-shadow:inset 0 0 2.8rem rgba(0,0,0,.42); clip-path:polygon(2% 2%,98% 2%,97% 98%,3% 98%); }
.home-tv-screen::after { position:absolute; inset:0; z-index:10; content:''; border-radius:inherit; background:linear-gradient(90deg,rgba(0,0,0,.62),transparent 12%),linear-gradient(180deg,rgba(0,0,0,.48),transparent 13%); box-shadow:inset 0 0 28px 10px rgba(0,0,0,.68); opacity:1; filter:blur(2px); pointer-events:none; }
.home-tv-frame { position:absolute; inset:0; z-index:1; display:block; width:100%; height:100%; object-fit:fill; opacity:1; filter:blur(.55px); clip-path:polygon(0 0,100% 0,100% 68%,84% 68%,84% 100%,0 100%); }
.home-tv-content { position:absolute; inset:3.5%; z-index:1; display:block; overflow:hidden; color:#fff; opacity:0; background:transparent; text-shadow:0 1px 4px #000,0 0 8px rgba(0,0,0,.8); transition:opacity 220ms ease,background 220ms ease; }
.home-tv-content.is-tuned { opacity:1; background:linear-gradient(115deg,color-mix(in srgb,var(--screen-tint,#193cff) 16%,transparent),rgba(24,8,56,.1) 62%,rgba(5,8,25,.06)); }
.home-tv-image { position:absolute; top:14.5%; left:3.5%; z-index:1; display:block; width:51.5%; height:60%; min-width:0; min-height:0; max-width:none; max-height:none; object-fit:cover; object-position:center; opacity:.9; mix-blend-mode:screen; filter:drop-shadow(1px 0 rgba(255,0,90,.14)) drop-shadow(-1px 0 rgba(0,220,255,.12)); }
.home-tv-copy { position:absolute; top:75%; left:12%; z-index:2; width:74%; height:25%; overflow:hidden; padding:.12em .25em; background:linear-gradient(90deg,rgba(4,13,47,.26),rgba(4,13,47,.14) 78%,transparent); }
.home-tv-title { margin:0; font:clamp(.82rem,1.35vw,1.25rem)/1.1 'Crosner','Comico',sans-serif; overflow-wrap:anywhere; }
.home-tv-description { margin:.32em 0 0; font:clamp(.68rem,.95vw,.95rem)/1.25 'Comico',sans-serif; overflow-wrap:anywhere; }
.tipazo-link { position:absolute; top:72.7%; left:27%; z-index:5; display:block; width:9.6%; min-width:64px; max-width:220px; padding:0; border:0; background:transparent; box-shadow:none; cursor:pointer; pointer-events:auto; transform:rotate(-7deg); transition:transform 180ms ease,filter 180ms ease; }
.tipazo-link img { display:block; width:100%; height:auto; filter:drop-shadow(0 5px 8px #0008); }
.tipazo-link:hover,.tipazo-link:focus-visible { transform:rotate(-2deg) scale(1.08); filter:drop-shadow(0 0 14px rgba(166,218,255,.7)); outline:none; }

/* Páginas de detalle y Sobre mí */
.detail-shell { position:relative; isolation:isolate; min-height:100vh; min-height:100svh; padding:1.4rem clamp(1rem,4vw,4rem) 2rem; color:#f7f4ff; background:radial-gradient(ellipse at 72% 40%,rgba(75,43,160,.3),transparent 34rem),linear-gradient(120deg,rgba(3,4,22,.83),rgba(5,8,30,.72)),url('./assets/fondogaleria.png') center/100% 100vh fixed;
  background-size:auto,auto,cover; }
.detail-shell::after { position:fixed; inset:0; z-index:0; content:''; pointer-events:none; background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px); }
.detail-header,.detail-layout,.about-layout { position:relative; z-index:1; }
.detail-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:2.5rem; }
.detail-kicker { color:#a6dcff; font:9px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.2em; text-transform:uppercase; }
.back-link { display:inline-flex; align-items:center; justify-content:center; min-height:2.1rem; padding:.55rem .75rem; border:1px solid rgba(170,196,255,.3); color:#e5dfff; background:rgba(7,8,28,.6); font:9px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.14em; text-decoration:none; text-transform:uppercase; transition:color 160ms ease,border-color 160ms ease,background 160ms ease; }
.back-link:hover,.back-link:focus-visible { color:#fff; border-color:var(--cyan); background:rgba(91,58,178,.38); outline:none; }
.detail-layout { display:grid; grid-template-columns:minmax(220px,.8fr) minmax(280px,1fr); align-items:center; gap:clamp(2rem,8vw,8rem); width:min(100%,1000px); min-height:calc(100vh - 7rem); min-height:calc(100svh - 7rem); margin:0 auto; }
.detail-title { margin:.8rem 0 1.25rem; color:#fff; font:clamp(3.8rem,8vw,7rem)/1.05 'Crosner','Comico',sans-serif; letter-spacing:.015em; text-shadow:0 3px 0 rgba(4,2,19,.7),0 0 26px rgba(135,87,227,.3); }
.detail-description { max-width:36rem; margin:0; color:#e4e2f5; font:clamp(1rem,1.25vw,1.15rem)/1.75 'Comico',sans-serif; }
.detail-visual { position:relative; min-height:clamp(17rem,42vw,27rem); border:1px solid rgba(184,164,255,.33); background:var(--detail-background,linear-gradient(135deg,#10113a,#452a83 48%,#051637)); box-shadow:0 20px 60px #0007,inset 0 0 35px rgba(0,0,0,.4),0 0 25px rgba(92,67,191,.2); }
.detail-visual::before { position:absolute; inset:8%; border:1px solid rgba(227,220,255,.25); content:''; }
.detail-visual--musica { --detail-background:radial-gradient(circle at 50% 50%,rgba(110,226,255,.72),transparent 16%),linear-gradient(135deg,#080b30,#6d2ca0 52%,#08194c); }
.detail-visual--contacto { --detail-background:linear-gradient(115deg,rgba(255,255,255,.12) 0 2%,transparent 2% 9%,rgba(160,120,255,.42) 9% 10%,transparent 10% 18%),linear-gradient(135deg,#120a36,#513196 48%,#020617); }
.about-page { min-height:100vh; min-height:100svh; background-color:#08071b; background-image:linear-gradient(90deg,rgba(5,4,24,.3) 0%,rgba(5,4,24,.62) 48%,rgba(5,4,24,.76) 100%),url('./assets/about-fondo.png'); background-position:center; background-size:auto,cover; background-repeat:no-repeat; }
.about-layout { display:grid; grid-template-columns:minmax(240px,.9fr) minmax(280px,1fr); align-items:center; gap:clamp(2rem,8vw,7rem); width:min(100%,1120px); min-height:calc(100vh - 5rem); min-height:calc(100svh - 5rem); margin:0 auto; padding:2rem 0; }
.about-portrait-stack { display:grid; justify-items:center; gap:1.15rem; min-width:0; }
@media (min-width:761px) { .about-portrait-stack { align-self:start; } }
.about-portrait { position:relative; width:min(100%,400px); aspect-ratio:634/832; isolation:isolate; transition:transform 260ms ease,filter 260ms ease; }
.about-portrait:hover { transform:scale(1.045) translateY(-.25rem); filter:drop-shadow(0 0 22px rgba(170,124,255,.3)); }
.about-window,.about-person { position:absolute; display:block; width:100%; height:100%; inset:0; object-fit:contain; }
.about-window { z-index:0; }
.about-person { z-index:1; transform:scale(1.01); transition:transform 260ms ease,filter 260ms ease; }
.about-portrait:hover .about-person { transform:scale(1.075) translateY(-.25rem); filter:drop-shadow(0 0 15px rgba(199,137,255,.34)); }
.about-socials { display:flex; align-items:flex-start; justify-content:center; gap:1rem; }
.xp-social { display:grid; justify-items:center; gap:.3rem; min-width:4rem; color:#e4ddff; text-decoration:none; transition:transform 160ms ease,filter 160ms ease; }
.xp-social:hover,.xp-social:focus-visible { transform:translateY(-3px); filter:drop-shadow(0 0 9px rgba(161,131,255,.72)); outline:none; }
.xp-social-window { display:grid; width:3.3rem; height:3.15rem; place-items:center; border:2px outset #dce7f5; border-radius:4px; color:#fff; background:linear-gradient(145deg,#7193c7,#315081 60%,#182d55); box-shadow:inset 1px 1px 0 #fff8,0 4px 9px #0007; }
.xp-guns-logo { color:#fff; font:1.08rem/1 'Crosner','Comico',sans-serif; text-shadow:1px 2px 0 #334e85; }
.xp-guns-logo span { color:#d8c7ff; font-size:.65em; }
.xp-social-icon { width:1.7rem; height:1.7rem; }
.xp-youtube-icon { color:#ff2638; fill:currentColor; }
.xp-instagram-icon { width:1.9rem; height:1.9rem; }
.xp-social-label { color:#fff; font:9px/1.2 ui-monospace,monospace; text-shadow:0 1px 5px #000; }
.about-copy { max-width:37rem; padding:clamp(1rem,2.6vw,2rem); border:1px solid rgba(215,205,255,.24); background:linear-gradient(120deg,rgba(5,4,23,.73),rgba(8,6,31,.42)); box-shadow:0 18px 45px rgba(0,0,0,.22),inset 0 0 26px rgba(107,73,198,.1); backdrop-filter:blur(2px); }
.about-kicker { margin:0 0 .6rem; color:#b9a4ff; font:9px/1.4 ui-monospace,monospace; letter-spacing:.18em; text-transform:uppercase; }
.about-title { margin:0 0 .9rem; color:#fff; font:clamp(4.4rem,9vw,8rem)/.86 'Crosner','Comico',sans-serif; letter-spacing:.01em; text-shadow:0 3px 0 #180b42,0 0 24px rgba(149,107,255,.36); }
.about-title span { color:#85eaff; }
.about-intro { margin:0 0 .8rem; color:#f4eaff; font:clamp(1.5rem,2.6vw,2.15rem)/1.2 'Comico',sans-serif; letter-spacing:.015em; }
.about-description { color:#eeeaf9; font:clamp(1rem,1.25vw,1.15rem)/1.75 'Comico',sans-serif; text-shadow:0 1px 6px rgba(0,0,0,.8); }
.about-description p { margin:.6rem 0 0; }
.about-hint { margin:1.1rem 0 0; color:#b9b2d2; font:8px/1.4 ui-monospace,monospace; letter-spacing:.14em; text-transform:uppercase; }

/* Retrato ampliado de Pela Tipazo */
.modal { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:1.25rem; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,2,17,.8); backdrop-filter:blur(9px); }
.modal-card { position:relative; z-index:1; display:grid; grid-template-columns:minmax(150px,.8fr) minmax(240px,1fr); gap:1.5rem; width:min(100%,680px); max-height:92svh; overflow:auto; padding:1rem; border:1px solid rgba(178,150,255,.55); background:linear-gradient(135deg,rgba(18,12,53,.98),rgba(3,7,24,.98)); box-shadow:0 25px 80px rgba(0,0,0,.7),0 0 35px rgba(126,91,228,.26); }
.modal-close { position:absolute; top:.35rem; right:.6rem; z-index:2; border:0; color:#fff; background:transparent; cursor:pointer; font:2rem/1 Arial,sans-serif; }
.modal-close:hover,.modal-close:focus-visible { color:var(--cyan); outline:none; }
.tipazo-modal-art { display:grid; min-height:18rem; place-items:center; overflow:hidden; background:radial-gradient(circle at center,rgba(113,72,177,.2),transparent 70%); }
.tipazo-modal-art img { display:block; width:100%; max-height:70vh; object-fit:contain; filter:drop-shadow(0 10px 16px #0008); }
.modal-content { align-self:center; padding:1rem 1rem 1rem 0; }
.tipazo-modal-content h2 { margin:0; color:#fff; font:clamp(2.5rem,5vw,4rem)/1.05 'Crosner','Comico',sans-serif; letter-spacing:.015em; }
.tipazo-modal-content p { max-width:29rem; color:#e4eaff; font:1rem/1.75 'Comico',sans-serif; letter-spacing:.005em; }
.modal-action { margin-top:.8rem; border:1px solid rgba(203,181,255,.7); padding:.75rem 1rem; color:#f3eaff; background:rgba(69,43,128,.55); cursor:pointer; font:1rem/1.2 'Crosner','Comico',sans-serif; }
.modal-action:hover,.modal-action:focus-visible { background:rgba(112,73,184,.8); outline:2px solid #d3baff; }

/* Portafolio: reglas de respaldo para mantener legible la página si falta su hoja propia */
.gallery-page { position:relative; min-height:100vh; min-height:100svh; padding:1.5rem clamp(1rem,4vw,4rem) 4rem; color:#f7f4ff; background:linear-gradient(120deg,rgba(4,3,25,.83),rgba(8,5,29,.6)),url('./assets/portfolio-fondo.png') center/cover fixed; }
.gallery-header,.gallery-toolbar,.gallery-grid { position:relative; z-index:1; width:min(100%,1320px); margin-right:auto; margin-left:auto; }
.gallery-header { min-height:6rem; }
.gallery-title { margin:.4rem 0; color:#fff; font:clamp(3.5rem,8vw,6.8rem)/.98 'Crosner','Comico',sans-serif; text-shadow:0 3px 0 #130833,0 0 22px rgba(162,117,255,.38); }
.gallery-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0; border-bottom:1px solid rgba(207,185,255,.3); }
.gallery-count,.gallery-filter { color:#ded6f5; font:10px/1.4 ui-monospace,monospace; letter-spacing:.1em; }
.gallery-filters { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.45rem; }
.gallery-filter { padding:.45rem .7rem; border:1px solid rgba(193,170,255,.4); background:rgba(11,8,37,.7); cursor:pointer; }
.gallery-filter.is-active,.gallery-filter:hover { color:white; border-color:#c7aaff; background:rgba(104,68,177,.6); }
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr)); gap:1rem; padding-top:1.2rem; }
.gallery-card { min-width:0; overflow:hidden; border:1px solid rgba(199,177,255,.3); color:white; background:rgba(8,6,28,.86); box-shadow:0 12px 26px #0005; cursor:pointer; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.gallery-card:hover,.gallery-card:focus-within { transform:translateY(-4px); border-color:rgba(127,229,255,.7); box-shadow:0 16px 30px #0008,0 0 20px #8c65ff33; }
.gallery-card-media { position:relative; display:grid; min-height:13rem; aspect-ratio:4/3; place-items:center; overflow:hidden; background:#09091b; }
.gallery-card-media img,.gallery-card-media video { display:block; width:100%; height:100%; object-fit:contain; }
.gallery-card-meta { padding:.7rem .8rem .9rem; }
.gallery-card-title { margin:0; color:white; font:1.1rem/1.2 'Crosner','Comico',sans-serif; }
.gallery-card-category,.gallery-card-group,.gallery-card-play { color:#b9a8ea; font:9px/1.4 ui-monospace,monospace; letter-spacing:.1em; }
.gallery-modal { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:1rem; }
.gallery-modal-backdrop { position:absolute; inset:0; border:0; background:rgba(0,0,12,.82); backdrop-filter:blur(7px); }
.gallery-modal-card { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(220px,.6fr); width:min(100%,1200px); max-height:92svh; overflow:auto; border:1px solid rgba(183,157,255,.48); background:#08071a; }
.gallery-modal-close { position:absolute; top:.5rem; right:.7rem; z-index:2; border:0; color:#fff; background:#171331; cursor:pointer; font:2rem/1 Arial,sans-serif; }
.gallery-modal-media { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); align-content:start; gap:.8rem; max-height:84svh; overflow:auto; padding:1rem; }
.gallery-modal-media img,.gallery-modal-media video { display:block; max-width:100%; max-height:74svh; object-fit:contain; cursor:zoom-in; }
.gallery-modal-info { align-self:center; padding:2rem; }
.gallery-modal-info h2 { font:clamp(2rem,4vw,3.5rem)/1.05 'Crosner','Comico',sans-serif; }
.gallery-image-viewer { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:1rem; }
.gallery-image-viewer-backdrop { position:absolute; inset:0; border:0; background:rgba(0,0,10,.9); }
.gallery-image-viewer-panel { position:relative; z-index:1; width:min(100%,1400px); height:min(92svh,1000px); border:1px solid #8972c7; background:#070614; }
.gallery-image-viewer-close { position:absolute; top:.4rem; right:.6rem; z-index:2; color:white; background:#171331; font-size:2rem; }
.gallery-image-viewer-controls { position:absolute; top:.6rem; left:.6rem; z-index:2; display:flex; gap:.35rem; }
.gallery-image-viewer-controls button { min-width:2.5rem; min-height:2.3rem; color:white; border:1px solid #9981d8; background:#171331; cursor:pointer; }
.gallery-image-viewer-viewport { display:grid; width:100%; height:100%; overflow:auto; place-items:center; }
.gallery-image-viewer-viewport img { max-width:none; max-height:none; transform-origin:center; }
.gallery-empty { grid-column:1/-1; padding:3rem; color:#dfd4ff; text-align:center; }

@media (max-width:950px) and (min-width:701px) { .home-intro { width:28%; left:0; } .home-menu { right:0; width:25%; } .tipazo-link { left:18%; } }
@media (max-width:700px) {
  .home-page { min-height:100svh; padding:.75rem; overflow-x:clip; overflow-y:visible; background-position:center; }
  .home-brand { font-size:1.35rem; }
  .home-layout { display:flex; flex:0 0 auto; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:.8rem; min-height:0; padding:.5rem 0 1rem; }
  .home-intro { position:relative; top:auto; left:auto; width:min(88%,26rem); max-width:26rem; padding:.7rem .85rem; transform:none; }
  .home-intro h1 { font-size:clamp(2.25rem,11vw,3.5rem); }
  .home-intro p { margin-top:.45rem; font-size:.95rem; }
  .home-menu { position:relative; top:auto; right:auto; order:2; width:min(100%,30rem); grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; margin:.4rem 0 0; transform:rotate(-1deg); }
  .home-menu { grid-auto-rows:3.9rem; }
  .home-link { height:3.9rem; min-height:0; padding:.4rem .65rem .4rem 1rem; font-size:clamp(.95rem,4.4vw,1.3rem); white-space:normal; }
  .home-link:nth-child(n) { transform:none; }
  .home-scene { position:relative; top:auto; bottom:auto; left:50%; order:3; width:min(220vw,220svh); height:min(137.5vw,137.5svh); margin:0 0 0; transform:translateX(-50%); }
  .home-tv-screen { top:41.5%; left:31.8%; width:36.5%; height:42.2%; }
  .tipazo-link { top:70%; left:28%; width:clamp(64px,18vw,100px); }
  .home-tv-copy { top:75%; right:auto; bottom:auto; left:12%; width:74%; height:25%; }
  .home-tv-title { font-size:clamp(.72rem,3.1vw,1rem); }
  .home-tv-description { font-size:clamp(.62rem,2.5vw,.82rem); }
  .modal-card { grid-template-columns:1fr; gap:.5rem; max-height:94svh; }
  .tipazo-modal-art { min-height:11rem; }
  .tipazo-modal-art img { max-height:39svh; }
  .modal-content { padding:.5rem; }
  .detail-shell { padding:1rem; background-attachment:scroll; }
  .detail-layout,.about-layout { grid-template-columns:1fr; min-height:auto; padding:4.5rem 0 2rem; }
  .detail-visual { min-height:15rem; }
  .about-portrait { width:min(76vw,340px); }
  .about-copy { padding:1rem; }
  .about-title { font-size:clamp(4rem,18vw,6rem); }
  .gallery-toolbar { align-items:flex-start; flex-direction:column; }
  .gallery-filters { justify-content:flex-start; }
  .gallery-modal-card { grid-template-columns:1fr; }
  .gallery-modal-info { padding:1rem; }
}
@media (max-width:440px) { .home-menu { grid-template-columns:1fr; width:calc(100% - 84px); } .home-link { min-height:2.8rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; } }

/* La escena y el PNG de la tele respetan el formato 16:10 del material original. */
.home-tv-screen { top:41.5%; left:31.8%; width:36.5%; height:42.2%; }
.tipazo-link { top:72.7%; left:27%; width:9.6%; min-width:64px; max-width:220px; }
@media (max-width:700px) {
  .home-scene { position:relative; top:auto; bottom:auto; left:50%; width:min(220vw,220svh); height:min(137.5vw,137.5svh); transform:translateX(-50%); }
}

/* Botones normales: usar los PNG del mismo juego visual que sus versiones seleccionadas. */
.home-link {
  border-color: transparent;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: none;
  clip-path: none;
}
.home-link:nth-child(1) { background-image: url('./assets/botones menu/boton sobre mi.png'); }
.home-link:nth-child(2) { background-image: url('./assets/botones menu/boton portfolio.png'); }
.home-link:nth-child(3) { background-image: url('./assets/botones menu/boton musica.png'); }
.home-link:nth-child(4) { background-image: url('./assets/botones menu/boton contacto.png'); }


/* Transición nativa al navegar entre las páginas del portafolio. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: portfolio-page-out 180ms ease both; }
::view-transition-new(root) { animation: portfolio-page-in 360ms cubic-bezier(.22,.75,.25,1) both; }
@keyframes portfolio-page-out { to { opacity:0; transform:scale(.99); filter:blur(4px); } }
@keyframes portfolio-page-in { from { opacity:0; transform:scale(1.01); filter:blur(4px); } to { opacity:1; transform:scale(1); filter:blur(0); } }
@media (prefers-reduced-motion:reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration:1ms !important; }
}
/* Videos de fondo fijos al viewport, independientes del alto del contenido. */
.page-background-video { position:fixed !important; top:0 !important; right:0 !important; bottom:0 !important; left:0 !important; z-index:0 !important; display:block !important; width:100vw !important; height:100vh !important; height:100dvh !important; min-width:100vw !important; min-height:100vh !important; min-height:100dvh !important; max-width:none !important; max-height:none !important; margin:0 !important; padding:0 !important; border:0 !important; object-fit:cover !important; object-position:center !important; transform:scale(1.2) !important; transform-origin:center center !important; pointer-events:none !important; }
.about-page,.gallery-page { position:relative; z-index:1; isolation:isolate; background:transparent !important; }

.about-background-video { opacity:.38; }

/* Viñeta suave en el borde interno de la pantalla CRT para integrar el contenido con el marco. */
.home-tv-screen::after {
  inset:-.5%;
  background:
    linear-gradient(90deg,rgba(0,0,12,.82) 0%,rgba(0,0,12,.38) 7%,transparent 19%),
    linear-gradient(180deg,rgba(0,0,12,.8) 0%,rgba(0,0,12,.34) 8%,transparent 20%),
    linear-gradient(270deg,rgba(0,0,12,.5) 0%,transparent 13%),
    linear-gradient(0deg,rgba(0,0,12,.42) 0%,transparent 13%);
  box-shadow:inset 0 0 30px 12px rgba(0,0,0,.78);
  opacity:.94;
  filter:blur(3px);
}
.home-tv-vignette { position:absolute; inset:0; z-index:3; display:block; width:100%; height:100%; object-fit:fill; pointer-events:none; }
.home-tv-vignette { mix-blend-mode:screen; }
.home-tv-screen { z-index:2; }
.home-tv-group { position:absolute; inset:0; z-index:1; isolation:isolate; pointer-events:none; }
.home-tv-video { position:absolute; top:35%; left:31.8%; z-index:3; display:block; width:36.5%; height:48.7%; object-fit:cover; object-position:center; opacity:.4; clip-path:polygon(2% 2%,98% 2%,97% 98%,3% 98%); pointer-events:none; }
.home-tv-vignette { inset:0; z-index:4; width:100%; height:100%; }
.home-tv-content.is-tuned .home-tv-image,
.home-tv-content.is-tuned .home-tv-title,
.home-tv-content.is-tuned .home-tv-description { opacity:1; }

/* Agranda el conjunto de forma uniforme para conservar las proporciones. */
@media (min-width:951px) {
  .home-tv-group { transform:translate(-2%,-9.5%) scale(1.22); transform-origin:50% 50%; }
}
@media (max-width:950px) and (min-width:701px) {
  .home-tv-group { transform:translate(-1%,-3%) scale(1.1); transform-origin:50% 50%; }
}
@media (max-width:700px) {
  .home-tv-group { transform:none; }
}
.home-tv-frame { filter:brightness(1.14) saturate(1.08) blur(.55px); }
.home-tv-vignette { filter:brightness(1.08); }
.home-tv-group.is-tuned .home-tv-video,
.home-tv-content.is-tuned { filter:brightness(1.2) saturate(1.08); }
.home-tv-group.is-tuned .home-tv-frame,
.home-tv-group.is-tuned .home-tv-vignette { filter:brightness(1.22) saturate(1.1); }
.home-tv-content.is-tuned .home-tv-image { filter:brightness(1.18) saturate(1.1) drop-shadow(0 0 8px rgba(74,202,255,.5)); }
.home-tv-content.is-tuned .home-tv-title,
.home-tv-content.is-tuned .home-tv-description { text-shadow:0 1px 3px #000,0 0 6px rgba(255,255,255,.72); }



/* Barra de navegación compartida para las páginas internas. */
.unified-site-header { position:relative; z-index:5; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:1rem; width:calc(100% + clamp(2rem,8vw,8rem)); min-height:3.35rem; margin:-1.4rem 0 0 calc(-1 * clamp(1rem,4vw,4rem)); padding:.55rem clamp(1rem,4vw,4rem); border-bottom:1px solid rgba(154,135,219,.25); background:linear-gradient(90deg,rgba(4,4,21,.55),rgba(12,8,38,.38),rgba(4,4,21,.55)); box-shadow:0 4px 20px rgba(0,0,0,.12); backdrop-filter:blur(5px); }
.unified-site-brand { justify-self:start; color:#f5f2ff; font:1.05rem/1 'Crosner','Comico',sans-serif; letter-spacing:.04em; text-decoration:none; text-shadow:0 0 12px rgba(111,220,255,.45); white-space:nowrap; }
.unified-site-brand span { color:rgba(190,173,255,.72); font:8px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.18em; text-transform:uppercase; }
.unified-site-nav { display:flex; align-items:center; justify-content:center; gap:clamp(.8rem,2vw,1.8rem); }
.unified-site-nav a { color:#ddd6f4; font:9px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.12em; text-decoration:none; text-transform:uppercase; white-space:nowrap; transition:color .16s ease,text-shadow .16s ease; }
.unified-site-nav a:hover,.unified-site-nav a:focus-visible { color:#fff; text-shadow:0 0 12px #72eaff; outline:none; }
.unified-site-menu { justify-self:end; display:inline-flex; align-items:center; justify-content:center; min-height:2rem; padding:.45rem .7rem; border:1px solid rgba(170,156,224,.34); color:#e5dfff; background:rgba(7,8,28,.55); font:8px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.13em; text-decoration:none; text-transform:uppercase; white-space:nowrap; transition:color .16s ease,border-color .16s ease,background .16s ease; }
.unified-site-menu:hover,.unified-site-menu:focus-visible { color:white; border-color:#72eaff; background:rgba(91,58,178,.38); outline:none; }
.gallery-page-title { width:min(100%,1320px); margin:.8rem auto 0; }
@media(max-width:700px) { .unified-site-header { grid-template-columns:minmax(0,1fr) auto; row-gap:.6rem; min-height:auto; padding-top:.65rem; padding-bottom:.65rem; } .unified-site-brand { font-size:.95rem; } .unified-site-brand span { font-size:7px; } .unified-site-nav { grid-column:1 / -1; grid-row:2; justify-content:flex-start; gap:clamp(.8rem,5vw,1.4rem); } .unified-site-nav a { font-size:8px; } .unified-site-menu { grid-column:2; grid-row:1; font-size:7px; } }

/* En móvil: presentación, TV y menú en ese orden; escritorio conserva la escena actual. */
@media (max-width:700px) {
  .home-page { display:flex; flex-direction:column; }
  .home-layout { display:contents; }
  .home-intro { order:1; margin:.5rem 0 .15rem; }
  .home-scene { order:2; margin:.35rem 0 .45rem; }
  .home-menu { order:3; margin:.35rem 0 1.2rem; }
}

/* Ajustes móviles de la portada: acorta el vacío previo a la TV y recupera contraste. */
@media (max-width:700px) {
  .home-scene { margin-top:clamp(-9rem,-26vw,-7rem); margin-bottom:clamp(-3rem,-8vw,-2rem); }
  .home-intro { background:linear-gradient(90deg,rgba(4,5,32,.28),rgba(4,5,32,.08) 76%,transparent); border-left-color:rgba(190,174,255,.92); }
  .home-intro h1 { color:#fff; text-shadow:0 2px 2px rgba(0,0,0,.9),0 0 10px rgba(118,157,255,.45),0 0 26px rgba(145,105,255,.42); }
  .home-intro p { color:#fff; text-shadow:0 2px 4px rgba(0,0,0,.96),0 0 10px rgba(9,20,68,.9); }
  .home-intro.fx-reveal { opacity:1; filter:none; }
  .home-page.fx-page-enter { animation:none; }
}


/* En la TV, compensar los márgenes transparentes de los PNG y darles luz según su arte. */
.home-tv-content .home-tv-image { left:var(--tv-image-left,7%); }
.home-tv-content.is-tuned .home-tv-image {
  filter:brightness(1.2) saturate(1.12)
    drop-shadow(0 0 5px var(--tv-image-glow,rgba(74,202,255,.78)))
    drop-shadow(0 0 13px var(--tv-image-glow-soft,rgba(74,202,255,.34)))
    drop-shadow(0 0 25px var(--tv-image-glow-soft,rgba(74,202,255,.34)));
}