/* ONLYDROP v22 — capa inmersiva. Se carga al final: sin patrones, slides a pantalla completa, tipografía con carácter */
:root{
  --od-build:26;
  --f-pop:'Bowlby One','Sora',sans-serif;
  --f-pix:'Silkscreen','Press Start 2P',monospace;
  --f-goth:'UnifrakturCook','Grenze Gotisch',serif;
  --f-sty:'Abril Fatface','Playfair Display',serif;
  --f-txt:'Space Grotesk','Sora',system-ui,sans-serif; /* solo para lo importante: legible */
  --padL:6vw;
}
@media (min-width:761px){:root{--padL:calc(3vw + 152px)}}

/* Cada disciplina tiene su propia voz: --hf fuente, --hs escala, --acc color */
#work[data-cat=animation2d],.project-dialog[data-cat=animation2d]{--hf:var(--f-pop);--hs:.92;--acc:#ff9d4d}
#work[data-cat=animation3d],.project-dialog[data-cat=animation3d]{--hf:var(--f-sty);--hs:1.12;--acc:#7fc4ff}
#work[data-cat=art2d],.project-dialog[data-cat=art2d]{--hf:var(--f-goth);--hs:1.3;--acc:#f3a28d}
#work[data-cat=storyboard],.project-dialog[data-cat=storyboard]{--hf:var(--f-pix);--hs:.5;--acc:#e8e26a}
#work[data-cat=projects],.project-dialog[data-cat=projects]{--hf:var(--f-sty);--hs:1.12;--acc:#ff6f8e}
#work,.project-dialog{--hf:var(--f-pop);--hs:1;--acc:#7fc4ff}

/* ---------- 1. Fuera patrones y ornamentos de fondo en subsecciones ---------- */
html body .work-section::before,html body .work-section::after,
html body .about-section::before,html body .about-section::after,
html body .contact-section::before,html body .contact-section::after{content:none!important;display:none!important}
html body .section-decor,html body #work .replace-note,html body #work .work-quote{display:none!important}
html body #work .work-section{background:var(--ink)!important;background-image:none!important}
html body #about .about-section,html body #contact .contact-section{
  background:radial-gradient(ellipse 55% 50% at 82% 18%,rgba(95,149,184,.17),transparent 70%),
             radial-gradient(ellipse 45% 45% at 8% 92%,rgba(138,68,82,.14),transparent 70%),var(--ink)!important}

/* ---------- 2. Work: composición de una sola pantalla (sin scroll) ---------- */
html body #work.view-panel{overflow:hidden!important;scroll-snap-type:none}
html body #work[data-cat] .work-section{grid-template-areas:none!important;justify-items:stretch!important;align-content:stretch!important;position:relative;display:grid!important;height:100%;min-height:100svh;padding:112px 3vw 4vh var(--padL)!important;gap:clamp(8px,1.3vw,20px);grid-template-columns:repeat(12,minmax(0,1fr))!important;grid-template-rows:repeat(6,minmax(0,1fr))!important;overflow:hidden;background:var(--ink)!important;background-image:none!important}
html body #work .work-topline{position:absolute;top:76px;left:var(--padL);right:3vw;z-index:9;display:flex;justify-content:space-between;pointer-events:none}
html body #work .work-topline>*{pointer-events:auto;font:500 11px/1 var(--f-txt);letter-spacing:.1em;color:#fff;background:rgba(12,14,19,.6);padding:9px 14px;border:1px solid rgba(255,255,255,.18)}
html body #work .section-heading{display:contents!important}
html body #work .section-heading>div{grid-area:var(--h);z-index:6;align-self:center;min-width:0}
html body #work .section-aside{grid-area:var(--a);z-index:6;align-self:end;font:400 clamp(14px,1.3vw,19px)/1.5 var(--f-txt);max-width:40ch;color:#c9ced8;margin:0;text-align:left!important}
html body #work .section-heading .eyebrow{font:700 12px/1 var(--f-txt);letter-spacing:.2em;color:var(--acc);margin:0 0 1.4vh}
html body #work .section-heading h2{font-family:var(--hf)!important;font-weight:400!important;font-size:calc(clamp(38px,6.6vw,120px)*var(--hs))!important;line-height:.92!important;letter-spacing:-.01em!important;text-transform:none!important;rotate:none!important;margin:0;color:#fff;text-shadow:.05em .05em 0 color-mix(in srgb,var(--acc) 55%,#000);overflow-wrap:break-word;hyphens:none}
/* una composición distinta por disciplina: --h título, --a texto, tiles por orden visible */
#work[data-cat=animation2d]{--h:1/1/3/8;--a:6/8/7/13}
#work[data-cat=animation2d] .project-card[data-i="1"]{grid-area:3/1/7/8;rotate:-1.2deg}
#work[data-cat=animation2d] .project-card[data-i="2"]{grid-area:1/8/6/13;rotate:1.8deg}
#work[data-cat=animation3d]{--h:3/1/6/6;--a:6/1/7/5}
#work[data-cat=animation3d] .project-card[data-i="1"]{grid-area:1/4/7/13;transform:perspective(1400px) rotateY(-9deg)}
#work[data-cat=art2d]{--h:5/1/7/6;--a:6/7/7/13}
#work[data-cat=art2d] .project-card[data-i="1"]{grid-area:1/1/5/7;rotate:-3deg}
#work[data-cat=art2d] .project-card[data-i="2"]{grid-area:2/6/6/12;rotate:2.5deg}
#work[data-cat=storyboard]{--h:5/1/7/9;--a:6/9/7/13}
#work[data-cat=storyboard] .project-card[data-i="1"]{grid-area:1/1/6/13;border:10px solid #f3efe6!important;rotate:-.5deg}
#work[data-cat=storyboard] .section-heading>div{background:#8a4452;padding:1.2vh 1.6vw;align-self:end;rotate:-1.5deg}
#work[data-cat=projects]{--h:1/1/4/6;--a:4/1/6/5}
#work[data-cat=projects] .project-card[data-i="1"]{grid-area:1/6/4/9}
#work[data-cat=projects] .project-card[data-i="2"]{grid-area:1/9/3/13}
#work[data-cat=projects] .project-card[data-i="3"]{grid-area:4/6/7/9}
#work[data-cat=projects] .project-card[data-i="4"]{grid-area:3/9/7/13}

html body #work .project-grid{display:contents!important;counter-reset:slide}
html body #work .project-grid .project-card{position:relative;display:block;width:auto!important;height:auto!important;min-width:0;min-height:0;margin:0!important;padding:0!important;border:0;background:#07080b;overflow:hidden;z-index:2;counter-increment:slide;opacity:1!important;animation:none!important;translate:none;grid-column:auto}
html body #work .project-grid .project-card.hidden{display:none!important}
html body #work .project-card::before{content:none!important}
html body #work .project-card{transition:box-shadow .25s,filter .25s}
html body #work .project-card:hover{box-shadow:0 0 0 3px var(--acc),8px 8px 0 var(--acc);z-index:5}
html body #work .project-open{position:absolute!important;inset:0;display:block!important;width:100%;height:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer;color:#fff}
html body #work .project-image{position:absolute!important;inset:0;width:100%!important;height:100%!important;aspect-ratio:auto!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:linear-gradient(135deg,#171a22,#0a0b0f)}
html body #work .project-image>*:not(.project-art-media){display:none!important}
html body #work .project-art-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
html body #work .project-card:hover .project-art-media{transform:scale(1.06)}
html body #work .project-open::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(7,8,11,.35),transparent 30%,transparent 50%,rgba(7,8,11,.92))}
html body #work .project-image::after{content:counter(slide,decimal-leading-zero);display:block!important;position:absolute;z-index:2;top:4%;left:5%;font:400 clamp(22px,3.4vw,56px)/1 var(--f-pop);color:transparent;-webkit-text-stroke:1.5px var(--acc)}
html body #work .project-meta{position:absolute;z-index:3;left:5%;right:5%;bottom:5%;display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
html body #work .project-type{font:700 clamp(9px,.8vw,12px)/1.2 var(--f-txt);letter-spacing:.14em;color:var(--acc);margin:0 0 1vh}
html body #work .project-meta h3{font-family:var(--hf)!important;font-weight:400!important;font-size:calc(clamp(18px,2.6vw,44px)*max(var(--hs),.65))!important;line-height:1!important;letter-spacing:0!important;text-transform:none!important;margin:0;color:#fff;text-shadow:.05em .05em 0 color-mix(in srgb,var(--acc) 50%,#000)}
html body #work .project-meta .arrow{flex:none;display:grid;place-items:center;width:clamp(36px,3.6vw,58px);height:clamp(36px,3.6vw,58px);border:2px solid var(--acc);border-radius:50%;font:400 clamp(16px,1.6vw,26px)/1 var(--f-txt);color:var(--acc);transition:background .25s,color .25s,rotate .35s}
html body #work .project-card:hover .arrow{background:var(--acc);color:#0c0e13;rotate:45deg}

/* ---------- 3. Ficha del proyecto (diálogo) ---------- */
html body .project-dialog{width:min(1080px,94vw);max-height:90svh;padding:0;border:2px solid var(--acc);background:#0c0e13;color:#e4e6ea;box-shadow:12px 12px 0 var(--acc);overflow:hidden}
html body .project-dialog[open]{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);animation:immDlg .5s cubic-bezier(.2,.9,.2,1)}
@keyframes immDlg{from{opacity:0;transform:translateY(30px) scale(.97)}}
html body .project-dialog::backdrop{background:rgba(5,6,9,.88);backdrop-filter:blur(10px)}
.dialog-fig{margin:0;min-height:320px;background:#12141b;position:relative}
.dialog-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dialog-body{padding:clamp(24px,4vw,52px);display:flex;flex-direction:column;justify-content:center;gap:18px;overflow:auto}
.dialog-index{font:700 11px/1 var(--f-txt);letter-spacing:.2em;color:#8e95a5}
html body .project-dialog .eyebrow{font:700 12px/1.3 var(--f-txt);letter-spacing:.16em;color:var(--acc)}
html body .project-dialog h2{font-family:var(--hf)!important;font-weight:400!important;font-size:calc(clamp(32px,4.4vw,64px)*var(--hs))!important;line-height:1!important;letter-spacing:-.005em!important;margin:0;color:#fff;text-shadow:.04em .04em 0 color-mix(in srgb,var(--acc) 50%,#000)}
.dialog-rule{height:3px;width:64px;background:var(--acc)}
html body .project-dialog p:not(.eyebrow){font:400 17px/1.65 var(--f-txt);color:#c9ced8;max-width:46ch;margin:0}
html body .project-dialog .dialog-actions{display:flex;align-items:center;gap:20px;margin-top:6px}
html body .project-dialog .dialog-actions a{font:700 13px/1 var(--f-txt);letter-spacing:.1em;background:var(--acc);color:#0c0e13;padding:15px 22px;text-decoration:none}
html body .project-dialog .dialog-actions span{font:500 11px var(--f-txt);letter-spacing:.12em;color:#8e95a5}
html body .project-dialog .dialog-close{position:absolute;z-index:3;top:14px;right:14px;font:700 11px/1 var(--f-txt);letter-spacing:.14em;color:#fff;background:rgba(12,14,19,.75);border:1px solid rgba(255,255,255,.3);padding:10px 14px}
@media (max-width:760px){
  html body .project-dialog[open]{grid-template-columns:1fr;overflow:auto}
  .dialog-fig{min-height:200px;height:30svh}
}

/* ---------- 4. Tipografía con personalidad (lo importante queda simple) ---------- */
html body .wordmark,html body .about-symbol{font-family:var(--f-goth)!important}
html body .index-intro h1{font-family:var(--f-pop)!important;font-weight:400!important;letter-spacing:-.02em!important;line-height:.92!important}
html body .index-intro h1 span{font-family:var(--f-goth)!important;font-size:1.2em;letter-spacing:0!important}
html body .category-info h2{letter-spacing:0!important;font-weight:400!important}
html body .cat-anim2d .category-info h2{font-family:var(--f-pop)!important;font-size:clamp(13px,1.2vw,17px)!important}
html body .cat-anim3d .category-info h2{font-family:var(--f-sty)!important;font-size:clamp(16px,1.5vw,22px)!important}
html body .cat-art2d .category-info h2{font-family:var(--f-goth)!important;font-size:clamp(20px,2vw,29px)!important}
html body .cat-story .category-info h2{font-family:var(--f-pix)!important;font-size:clamp(9px,.85vw,12px)!important}
html body .cat-projects .category-info h2{font-family:var(--f-sty)!important;font-size:clamp(16px,1.5vw,22px)!important}
html body #about .about-section h2{font-family:var(--f-pop)!important;font-weight:400!important;letter-spacing:-.015em!important;line-height:1!important;rotate:none!important;text-transform:none!important}
html body #about .about-section h2 em{font-family:var(--f-goth)!important;font-size:1.25em;letter-spacing:0!important;color:#f3a28d}
html body #contact .contact-section h2{font-family:var(--f-sty)!important;font-weight:400!important;letter-spacing:-.01em!important;text-transform:none!important;rotate:-2deg;line-height:.95!important}
html body #contact .contact-section h2 em{font-family:var(--f-goth)!important;font-size:1.15em;letter-spacing:0!important;color:#f3a28d}
html body .about-decoration,html body .contact-stamp{font-family:var(--f-pix)!important;letter-spacing:.04em!important}
/* lo importante: simple y legible */
html body .nav a,html body .contact-email,html body .social-links a,html body .back-index,html body .about-copy,html body .index-description p{font-family:var(--f-txt)!important}
html body .about-copy{font-size:clamp(16px,1.35vw,19px);line-height:1.65}
html body .contact-email{font-weight:700;letter-spacing:.02em}


/* ---------- 5. Portada más amplia, sin riel; riel solo en subsecciones ---------- */
html:not(.in-sub) .od-rail{display:none!important}
@media (min-width:761px){
  html body #home .index-screen{padding-left:2.4vw!important;padding-right:2.4vw!important;padding-bottom:2.2vh}
  html body #home .index-intro h1{font-size:clamp(56px,9.4vw,160px)!important}
  html body #home .category-menu{gap:clamp(8px,1.1vw,18px)}
}

/* ---------- 6. Efectos de transición (colores de la página) ---------- */
.p5-fx{position:fixed;inset:0;z-index:9999;pointer-events:none;overflow:hidden;--acc:#5f95b8}
.p5-shard{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;will-change:translate;line-height:1;white-space:nowrap}
html.p5-busy,html.p5-busy body{overflow:hidden}
.p5-burst{position:absolute;left:50%;top:50%;width:120vmax;height:120vmax;margin:-60vmax 0 0 -60vmax;background:repeating-conic-gradient(var(--c,#5f95b8) 0 1deg,transparent 1deg 9deg);will-change:scale,opacity;-webkit-mask-image:radial-gradient(circle,transparent 8%,#000 60%);mask-image:radial-gradient(circle,transparent 8%,#000 60%)}
.p5-title{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse 70% 40% at 50% 50%,rgba(12,14,19,.72),transparent 75%)}
.p5-title b{display:block;font-weight:400;line-height:.95;text-align:center;rotate:var(--r);color:#e4e6ea;text-shadow:.05em .05em 0 color-mix(in srgb,var(--acc) 60%,#000);max-width:94vw}
.p5-title b span{display:inline-block}
html.p5-busy body{pointer-events:none}

html body #work .project-card,html body #work .project-image{clip-path:none!important}

/* ---------- 7. Sin fade de panel: el cambio de sección lo hace solo el motor de transición ---------- */
html body .view-panel,html body .view-panel.active{transition:none!important;transform:none!important;filter:none!important}
html body .view-panel:not(.active){opacity:0;visibility:hidden}
html.p5-busy #views{will-change:transform,scale,rotate}
html.p5-busy .grain,html.p5-busy .particle-canvas{visibility:hidden}

/* ---------- 8. Aviso de versión / modo reducido ---------- */
.od-note{position:fixed;left:50%;bottom:18px;translate:-50% 0;z-index:10000;max-width:min(92vw,640px);display:flex;gap:14px;align-items:center;padding:12px 16px;background:#e60012;color:#fff;font:700 12px/1.4 var(--f-txt);letter-spacing:.04em;border:2px solid #fff;box-shadow:6px 6px 0 #000}
.od-note button{font:inherit;background:#fff;color:#000;border:0;padding:8px 12px;cursor:pointer;white-space:nowrap}


/* --- Grilla Espacial en Perspectiva Coherente (v25) --- */
.p5-spatial-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 0;
  perspective: 1000px;
}

.grid-mesh {
  position: absolute;
  width: 200vw;
  height: 200vh;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 80px 80px;
  transform: rotateX(60deg) translateZ(-150px);
  transform-origin: var(--vx, 50%) var(--vy, 50%);
}

.grid-vanishing-ray {
  position: absolute;
  top: var(--vy, 50%);
  left: var(--vx, 50%);
  width: 180vw;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent, #5f95b8) 40%, transparent);
  opacity: 0.3;
  transform-origin: 0 0;
}

/* Partículas y Fragmentos Texturizados */
.p5-shard {
  position: fixed;
  top: 50%;
  left: 50%;
  pointer-events: none;
  z-index: 1000;
  transform-origin: center;
  will-change: transform, opacity;
}

/* Títulos Dinámicos Escalonados */
.p5-title {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1001;
  overflow: hidden;
}

.p5-title b {
  display: flex;
  color: var(--ice, #eef2f7);
  text-shadow: 0 0 35px var(--acc, rgba(95, 149, 184, 0.45));
  letter-spacing: -0.04em;
  line-height: 1;
}

.p5-title span {
  display: inline-block;
  will-change: transform, opacity;
}

/* Garantía de visibilidad para paneles activos */
.view-panel.active .project-card,
.view-panel.active .project-card * {
  opacity: 1 !important;
  visibility: visible !important;
}


/* ==========================================================================
   ONLYDROP v26 — HOME VIEWPORT FIX & EQUAL JERARQUÍA CATEGORY CARDS
   ========================================================================== */

#home {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}

#home .index-screen {
  height: 100vh !important;
  max-height: 100vh !important;
  padding: clamp(12px, 1.8vh, 20px) 3vw !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: clamp(8px, 1.2vh, 16px) !important;
  overflow: hidden !important;
}

#home .index-topline {
  flex: 0 0 auto !important;
  margin-bottom: 0 !important;
}

#home .index-intro {
  flex: 0 0 auto !important;
  margin-bottom: 0 !important;
}

#home .category-menu {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  grid-template-rows: 1fr !important;
  gap: clamp(10px, 1.2vw, 18px) !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  align-items: stretch !important;
}

#home .category-card {
  grid-column: auto !important;
  grid-row: auto !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  width: 100% !important;
  position: relative !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease !important;
}

#home .category-card:nth-child(1) { rotate: -0.8deg; }
#home .category-card:nth-child(2) { rotate: 0.9deg; }
#home .category-card:nth-child(3) { rotate: -0.5deg; }
#home .category-card:nth-child(4) { rotate: 0.8deg; }
#home .category-card:nth-child(5) { rotate: -0.7deg; }

#home .category-card:hover {
  rotate: 0deg !important;
  transform: translateY(-6px) scale(1.02) !important;
  z-index: 10 !important;
}

#home .category-visual {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(235, 228, 216, 0.28) !important;
}

#home .category-card:nth-child(1) .category-visual { border-radius: 4px 18px 4px 14px; }
#home .category-card:nth-child(2) .category-visual { border-radius: 16px 4px 14px 4px; }
#home .category-card:nth-child(3) .category-visual { border-radius: 4px 14px 4px 18px; }
#home .category-card:nth-child(4) .category-visual { border-radius: 14px 4px 18px 4px; }
#home .category-card:nth-child(5) .category-visual { border-radius: 4px 18px 4px 14px; }

#home .category-info {
  flex: 0 0 auto !important;
  padding: 10px 12px !important;
  margin-top: 6px !important;
  background: linear-gradient(100deg, rgba(6,8,12,0.96), rgba(17,22,29,0.92)) !important;
  border-bottom: 1px solid rgba(136,191,201,0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-radius: 4px !important;
}

#home .category-info h2 {
  font-size: clamp(12px, 1.1vw, 16px) !important;
  font-weight: 800 !important;
  margin: 0 0 3px 0 !important;
  letter-spacing: -0.03em !important;
  color: #ffffff !important;
}

#home .category-info p {
  font-size: clamp(6px, 0.55vw, 8px) !important;
  margin: 0 !important;
  color: #a0b2c6 !important;
  letter-spacing: 0.08em !important;
}

#home .index-footer {
  flex: 0 0 auto !important;
  margin-top: 0 !important;
}

@media (max-width: 900px) {
  #home .category-menu {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: auto !important;
    overflow-y: auto !important;
  }
  #home {
    height: auto !important;
    overflow-y: auto !important;
  }
  #home .index-screen {
    height: auto !important;
  }
}

/* v27.1 — TÍTULO ÚNICO EN LAYOUT Y TRANSICIÓN */
.p5-title { display: none !important; }
#workHeading, .section-heading h2, .about-section h2, .contact-section h2 {
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.85s ease !important;
}


/* ==========================================
   v28 — TRANSICIONES Y HOVERS SUAVES ("ELEGANT FLOAT")
   ========================================== */

/* Transición base y duraciones para paneles y botones */
.p5-busy, .p5-busy * {
  /* Evitar saltos bruscos durante transiciones de cámara */
}

/* Transición fluida para elementos interactivos y cards */
a, button, .category-card, .work-item, .nav-item, .od-rail a {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), 
              opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), 
              background-color 0.4s ease, 
              border-color 0.4s ease, 
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Efecto hover suave de elevación ("flotar") */
.category-card:hover, .work-item:hover {
  transform: translateY(-4px) scale(1.015) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35) !important;
}

/* Reducción de sobreimpulso brusco (cartoon) en overlay y títulos */
.p5-title { display: none !important; }

#workHeading, 
.section-heading h2,
.about-section h2,
.contact-section h2 {
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), 
              opacity 0.55s ease, 
              filter 0.55s ease !important;
}

/* Animación de entrada fluida para paneles de vista */
.view-panel {
  transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
              transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* ==========================================
   v29 — LIMPIEZA DE DECORACIONES Y TIPOGRAFÍA ÚNICA
   ========================================== */

/* Importación de tipografías con alta personalidad */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* Ocultar cualquier elemento o canvas decorativo sobrante */
.debris-particle, 
.spatial-grid, 
.transition-decor, 
.decor-line, 
canvas.p5-canvas {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Aplicación de nueva tipografía con carácter único */
body, button, input, textarea {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Encabezados y títulos con fuerte personalidad visual */
h1, h2, h3, .section-heading h2, #workHeading, .category-info h2, .od-rail a {
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

.eyebrow, .category-info p {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

/* ==========================================
   v30 — ELIMINACIÓN ABSOLUTA DE LÍNEAS Y MESHES DE TRANSICIÓN
   ========================================== */
.p5-spatial-grid,
.grid-mesh,
.grid-vanishing-ray,
.p5-shard,
.p5-title,
.transition-decor,
.decor-line,
canvas.p5-canvas,
.p5-busy .p5-spatial-grid,
.p5-busy .grid-mesh {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* ==========================================
   v31 — FUENTES LLAMATIVAS, ALTO CONTRASTE Y FIX DE SUPERPOSICIÓN DE TEXTO
   ========================================== */

/* Importación de Google Fonts con alta personalidad y estética cyberpunk/artística */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@700;800;900&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --font-display: 'Unbounded', sans-serif !important;
  --font-body: 'Space Grotesk', sans-serif !important;
  
  /* Paleta de Alto Contraste */
  --bg-dark: #050608 !important;
  --text-bright: #ffffff !important;
  --text-sub: #00f0ff !important;
  --accent-cyan: #00f0ff !important;
  --accent-magenta: #ff0055 !important;
  --accent-yellow: #ffe600 !important;
}

body, button, input, textarea {
  font-family: var(--font-body) !important;
  color: var(--text-bright) !important;
}

/* Encabezados y títulos con gran personalidad */
h1, h2, h3, .section-heading h2, #workHeading, .category-info h2, .od-rail a {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
}



/* ==========================================================================
   v34 FIX: QUITAR DOBLE ENCUADRE + UNIFICACIÓN GENERAL DE FUENTES
   ========================================================================== */

/* 1. UNIFICACIÓN GLOBAL DE FUENTES */
/* Forzamos que las reglas con mayor especificidad de las distintas categorías de trabajo 
   (cat-anim2d, cat-anim3d, cat-art2d, cat-story, cat-projects) respeten la tipografía del sistema */

html body h1,
html body h2,
html body h3,
html body .section-heading h2,
html body #workHeading,
html body .category-info h2,
html body .cat-anim2d .category-info h2,
html body .cat-anim3d .category-info h2,
html body .cat-art2d .category-info h2,
html body .cat-story .category-info h2,
html body .cat-projects .category-info h2,
html body .about-content h2,
html body .contact-section h2,
html body .wordmark,
html body .od-rail a {
  font-family: var(--font-display), 'Unbounded', sans-serif !important;
  letter-spacing: -0.03em !important;
}

html body, 
html body button, 
html body input, 
html body textarea,
html body .category-info p,
html body .eyebrow {
  font-family: var(--font-body), 'Space Grotesk', sans-serif !important;
}

/* 2. REMOCIÓN DEL ENCUADRE / CAJA EXTRA FLOTANTE */
/* Mantiene el encuadre recortado irregular original sobre .category-visual y .category-card sin envoltorios extras */

#home .category-card {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: visible !important;
}

#home .category-info {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  background: rgba(4, 6, 12, 0.94) !important;
  border: none !important;
  border-top: 1px solid rgba(210, 212, 235, 0.16) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 10px 12px !important;
  transform: none !important;
}