:root{
    --ink:#15101F;
    --paper:#F7F3EC;
    --pink:#FF3D7F;
    --blue:#3D6BFF;
    --yellow:#FFD23D;
    --lime:#B6FF3D;
    --purple:#8C3DFF;
    --line: rgba(21,16,31,0.12);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Space Grotesk', sans-serif;
    overflow-x:hidden;
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
  }

  /* ===== NOISE / GRAIN ===== */
  .grain{
    position:fixed; inset:0; pointer-events:none; z-index:999;
    opacity:0.035; mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ===== NAV ===== */
  nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:22px clamp(20px,5vw,56px);
    background:rgba(247,243,236,0.7);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    flex-wrap:nowrap;
  }
  .logo{
    font-family:'Bricolage Grotesque', sans-serif;
    font-weight:800; font-size:1.05rem; letter-spacing:-0.02em;
    text-decoration:none; color:var(--ink);
  }
  .logo span{color:var(--pink);}
  .nav-right{ display:flex; align-items:center; gap:clamp(16px,2.5vw,32px); }
  .navlinks{display:flex; gap:clamp(16px,2.5vw,32px); list-style:none;}
  .navlinks a{
    color:var(--ink); text-decoration:none; font-size:0.85rem;
    font-weight:500; position:relative; padding-bottom:4px;
  }
  .navlinks a::after{
    content:''; position:absolute; bottom:0; left:0; width:0; height:2px;
    background:var(--pink); transition:width .3s cubic-bezier(.65,0,.35,1);
  }
  .navlinks a:hover::after{width:100%;}
  .navlinks li{display:flex;}
  .nav-cta{
    background:var(--ink); color:var(--paper); padding:8px 18px;
    border-radius:100px; font-size:0.82rem; font-weight:500; text-decoration:none;
    transition:transform .25s ease, background .25s ease;
  }
  .nav-cta:hover{ background:var(--pink); transform:translateY(-2px) rotate(-2deg); }
  .burger{display:none; flex-direction:column; gap:5px; cursor:pointer; z-index:101;}
  .burger span{width:24px; height:2px; background:var(--ink);}

  /* ===== HERO ===== */
  .hero{
    position:relative; min-height:100vh; display:flex; flex-direction:column;
    justify-content:center; padding:0 clamp(20px,5vw,56px);
    padding-top:90px;
  }
  .blob{
    position:absolute; border-radius:50%; filter:blur(60px); opacity:0.55;
    animation:float 14s ease-in-out infinite;
    z-index:0;
  }
  .blob1{width:420px; height:420px; background:var(--pink); top:8%; right:6%; animation-delay:0s;}
  .blob2{width:340px; height:340px; background:var(--blue); bottom:6%; left:2%; animation-delay:-4s;}
  .blob3{width:260px; height:260px; background:var(--yellow); top:50%; left:38%; animation-delay:-9s; opacity:0.4;}
  @keyframes float{
    0%,100%{ transform:translate(0,0) scale(1); }
    33%{ transform:translate(30px,-40px) scale(1.08); }
    66%{ transform:translate(-25px,25px) scale(0.95); }
  }

  .eyebrow{
    position:relative; z-index:1;
    font-family:'JetBrains Mono', monospace; font-size:0.78rem;
    letter-spacing:0.12em; text-transform:uppercase;
    display:flex; align-items:center; gap:10px; margin-bottom:18px;
    color:var(--ink);
  }
  .eyebrow .dot{width:8px; height:8px; border-radius:50%; background:var(--lime); animation:pulse 1.8s infinite;}
  @keyframes pulse{ 0%,100%{ transform:scale(1); opacity:1;} 50%{ transform:scale(1.6); opacity:0.5;} }

  h1.hero-title{
    position:relative; z-index:1;
    font-family:'Bricolage Grotesque', sans-serif;
    font-weight:800; letter-spacing:-0.03em; line-height:0.95;
    font-size:clamp(2.8rem, 9vw, 7.2rem);
    max-width:1100px;
  }
  h1.hero-title .line{ display:block; overflow:hidden; }
  h1.hero-title .line span{
    display:inline-block; transform:translateY(110%);
    animation:rise 0.9s cubic-bezier(.16,1,.3,1) forwards;
  }
  h1.hero-title .line:nth-child(1) span{ animation-delay:0.05s; }
  h1.hero-title .line:nth-child(2) span{ animation-delay:0.18s; }
  h1.hero-title .accent{ color:var(--pink); font-style:italic; }
  #wave-text{ display:inline-block; }
  #wave-text .wl{
    display:inline-block;
    animation:wave 2.2s ease-in-out infinite;
  }
  @keyframes wave{
    0%,100%{ transform:translateY(0) rotate(0deg); }
    50%{ transform:translateY(-10px) rotate(-4deg); }
  }
  @keyframes rise{ to{ transform:translateY(0); } }

  .hero-sub{
    position:relative; z-index:1; max-width:480px; margin-top:28px;
    font-size:1.05rem; line-height:1.55; color:rgba(21,16,31,0.75);
  }
  .hero-tags{
    position:relative; z-index:1; display:flex; gap:10px; margin-top:34px; flex-wrap:wrap;
  }
  .hero-tags span{
    font-family:'JetBrains Mono', monospace; font-size:0.72rem;
    border:1px solid var(--line); padding:6px 14px; border-radius:100px;
    background:rgba(255,255,255,0.5);
  }
  .scroll-cue{
    position:absolute; bottom:34px; left:clamp(20px,5vw,56px);
    display:flex; align-items:center; gap:10px;
    font-family:'JetBrains Mono', monospace; font-size:0.72rem; letter-spacing:0.08em;
    z-index:1;
  }
  .scroll-cue .arrow{ animation:bob 1.6s ease-in-out infinite; }
  @keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }

  /* ===== SECTION HEADERS ===== */
  .section{ padding:120px clamp(20px,5vw,56px); position:relative; }
  .section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:56px; flex-wrap:wrap; }
  .section-title{
    font-family:'Bricolage Grotesque', sans-serif; font-weight:800;
    font-size:clamp(2rem, 4.5vw, 3.4rem); letter-spacing:-0.02em;
  }
  .section-count{
    font-family:'JetBrains Mono', monospace; font-size:0.85rem; color:rgba(21,16,31,0.5);
  }
  .reveal{ opacity:0; transform:translateY(36px); transition:opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1); }
  .reveal.in{ opacity:1; transform:translateY(0); }

  /* ===== WORK GRID / CARDS ===== */
  .grid{
    display:grid; grid-template-columns:repeat(2, 1fr); gap:28px;
  }
  @media (max-width:760px){ .grid{ grid-template-columns:1fr; } }

  .card{
    position:relative; border-radius:22px; overflow:hidden;
    aspect-ratio:4/3; cursor:pointer;
    border:1px solid var(--line);
    background:#fff;
    transform-style:preserve-3d;
    transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease;
  }
  .card:hover{
    transform:translateY(-10px) rotate(-0.6deg);
    box-shadow:0 30px 60px -20px rgba(21,16,31,0.25);
  }
  .card-fill{
    position:absolute; inset:0;
    display:flex; flex-direction:column; justify-content:space-between;
    padding:28px;
  }
  .card-img{
    position:absolute; inset:0; background-size:cover; background-position:center;
    transform:scale(1.06); transition:transform .6s cubic-bezier(.16,1,.3,1);
  }
  .card:hover .card-img{ transform:scale(1.0); }
  .card-overlay{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(21,16,31,0) 35%, rgba(21,16,31,0.75) 100%);
    transition:opacity .4s ease;
  }
  .card-tag{
    align-self:flex-start;
    font-family:'JetBrains Mono', monospace; font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase;
    background:rgba(255,255,255,0.92); color:var(--ink);
    padding:6px 14px; border-radius:100px;
    transform:translateY(-6px); opacity:0; transition:all .35s ease;
  }
  .card:hover .card-tag{ transform:translateY(0); opacity:1; }
  .card-bottom{ position:relative; z-index:2; color:#fff; }
  .card-bottom h3{
    font-family:'Bricolage Grotesque', sans-serif; font-weight:700; font-size:1.4rem; margin-bottom:4px;
    transform:translateY(8px); transition:transform .4s cubic-bezier(.16,1,.3,1);
  }
  .card:hover .card-bottom h3{ transform:translateY(0); }
  .card-bottom p{ font-size:0.82rem; opacity:0; max-height:0; transition:opacity .35s ease .05s; color:rgba(255,255,255,0.85); }
  .card:hover .card-bottom p{ opacity:1; max-height:40px; }
  .card-peel{
    position:absolute; top:0; right:0; width:56px; height:56px;
    background:var(--paper);
    border-bottom-left-radius:18px;
    display:flex; align-items:center; justify-content:center;
    transform:translate(8px,-8px) rotate(0deg);
    transition:transform .45s cubic-bezier(.34,1.56,.64,1);
    z-index:3;
  }
  .card:hover .card-peel{ transform:translate(0,0) rotate(6deg); }
  .card-peel svg{ width:18px; height:18px; }

  /* color variants per category, used for placeholder gradient backgrounds */
  .c-anim .card-img{ background:linear-gradient(135deg,#FF3D7F,#FFD23D); }
  .c-bg .card-img{ background:linear-gradient(135deg,#3D6BFF,#B6FF3D); }
  .c-arte .card-img{ background:linear-gradient(135deg,#8C3DFF,#FF3D7F); }
  .c-3d .card-img{ background:linear-gradient(135deg,#FFD23D,#3D6BFF); }

  /* ===== ABOUT STRIP ===== */
  .about{
    background:var(--ink); color:var(--paper);
    border-radius:32px; margin:0 clamp(20px,5vw,56px);
    padding:80px clamp(24px,5vw,72px);
    display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
  }
  @media (max-width:760px){ .about{ grid-template-columns:1fr; padding:56px 24px;} }
  .about h2{
    font-family:'Bricolage Grotesque', sans-serif; font-weight:800;
    font-size:clamp(1.8rem,3.6vw,2.6rem); letter-spacing:-0.02em; line-height:1.1;
  }
  .about h2 em{ color:var(--lime); font-style:italic; }
  .about p{ margin-top:18px; line-height:1.65; color:rgba(247,243,236,0.75); font-size:1rem; }
  .stat-row{ display:flex; gap:32px; margin-top:28px; flex-wrap:wrap; }
  .stat b{ font-family:'Bricolage Grotesque', sans-serif; font-size:2rem; display:block; color:var(--pink); }
  .stat span{ font-size:0.78rem; color:rgba(247,243,236,0.6); font-family:'JetBrains Mono', monospace; }
  .about-visual{
    position:relative; height:280px; border-radius:20px; overflow:hidden;
    background:linear-gradient(135deg,#FF3D7F,#8C3DFF,#3D6BFF);
    background-size:200% 200%;
    animation:gradientshift 8s ease infinite;
  }
  @keyframes gradientshift{
    0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;}
  }

  /* ===== CONTACT / FOOTER ===== */
  .contact{
    text-align:center; padding:140px clamp(20px,5vw,56px) 80px;
  }
  .contact-title{
    font-family:'Bricolage Grotesque', sans-serif; font-weight:800;
    font-size:clamp(2.4rem,7vw,5.5rem); letter-spacing:-0.03em; line-height:1;
  }
  .contact-title a{ color:var(--ink); text-decoration:none; position:relative; }
  .contact-title a::after{
    content:''; position:absolute; left:0; bottom:6px; width:100%; height:10px;
    background:var(--lime); z-index:-1; transform:scaleX(0); transform-origin:left;
    transition:transform .5s cubic-bezier(.16,1,.3,1);
  }
  .contact-title a:hover::after{ transform:scaleX(1); }
  .contact-sub{ margin-top:20px; font-size:1rem; color:rgba(21,16,31,0.6); }
  .social-row{ display:flex; gap:20px; justify-content:center; margin-top:42px; flex-wrap:wrap; }
  .social-row a{
    font-family:'JetBrains Mono', monospace; font-size:0.8rem;
    border:1px solid var(--line); padding:10px 20px; border-radius:100px;
    text-decoration:none; color:var(--ink);
    transition:background .25s ease, color .25s ease, transform .25s ease;
  }
  .social-row a:hover{ background:var(--ink); color:var(--paper); transform:translateY(-3px); }
  footer{
    display:flex; justify-content:space-between; padding:28px clamp(20px,5vw,56px);
    font-family:'JetBrains Mono', monospace; font-size:0.72rem; color:rgba(21,16,31,0.5);
    border-top:1px solid var(--line); flex-wrap:wrap; gap:10px;
  }

  @media (max-width:880px){
    .navlinks{ display:none; }
    .burger{ display:flex; }
    .nav-right{ gap:14px; }
  }

/* ===== INTERNAL PAGE HEADER ===== */
.page-hero{
  position:relative; padding:160px clamp(20px,5vw,56px) 80px;
  overflow:hidden;
}
.page-hero .blob{ opacity:0.4; }
.page-eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:0.78rem;
  letter-spacing:0.12em; text-transform:uppercase; position:relative; z-index:1;
  display:flex; align-items:center; gap:10px; margin-bottom:14px;
}
.page-eyebrow a{ color:var(--ink); text-decoration:none; opacity:0.6; }
.page-eyebrow a:hover{ opacity:1; }
.page-title{
  position:relative; z-index:1;
  font-family:'Bricolage Grotesque', sans-serif; font-weight:800;
  letter-spacing:-0.03em; line-height:0.95;
  font-size:clamp(2.6rem, 8vw, 6rem);
}
.page-title em{ color:var(--pink); font-style:italic; }
.page-sub{
  position:relative; z-index:1; max-width:560px; margin-top:22px;
  font-size:1.05rem; line-height:1.6; color:rgba(21,16,31,0.7);
}

/* ===== GALLERY (internal category pages) ===== */
.gallery{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;
  padding:0 clamp(20px,5vw,56px) 140px;
}
@media (max-width:980px){ .gallery{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .gallery{ grid-template-columns:1fr; } }

.gitem{
  position:relative; border-radius:18px; overflow:hidden;
  aspect-ratio:1/1; border:1px solid var(--line); cursor:pointer;
  transform-style:preserve-3d;
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
}
.gitem:hover{ transform:translateY(-8px) rotate(-0.5deg); box-shadow:0 24px 48px -18px rgba(21,16,31,0.25); }
.gitem .gimg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transform:scale(1.05); transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.gitem:hover .gimg{ transform:scale(1); }
.gitem .gnum{
  position:absolute; top:14px; left:14px; z-index:2;
  font-family:'JetBrains Mono', monospace; font-size:0.7rem;
  background:rgba(255,255,255,0.9); padding:4px 10px; border-radius:100px;
  transform:translateY(-6px); opacity:0; transition:all .35s ease;
}
.gitem:hover .gnum{ transform:translateY(0); opacity:1; }
.gitem .glabel{
  position:absolute; bottom:0; left:0; right:0; z-index:2; padding:18px;
  color:#fff; font-family:'Bricolage Grotesque', sans-serif; font-weight:700; font-size:1.05rem;
  background:linear-gradient(180deg, rgba(21,16,31,0) 40%, rgba(21,16,31,0.78) 100%);
  transform:translateY(8px); transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.gitem:hover .glabel{ transform:translateY(0); }

/* placeholder gradients reused per category */
.g-anim1{ background:linear-gradient(135deg,#FF3D7F,#FFD23D); }
.g-anim2{ background:linear-gradient(135deg,#FFD23D,#8C3DFF); }
.g-anim3{ background:linear-gradient(135deg,#3D6BFF,#FF3D7F); }
.g-bg1{ background:linear-gradient(135deg,#3D6BFF,#B6FF3D); }
.g-bg2{ background:linear-gradient(135deg,#8C3DFF,#3D6BFF); }
.g-bg3{ background:linear-gradient(135deg,#B6FF3D,#FFD23D); }
.g-arte1{ background:linear-gradient(135deg,#8C3DFF,#FF3D7F); }
.g-arte2{ background:linear-gradient(135deg,#FF3D7F,#3D6BFF); }
.g-arte3{ background:linear-gradient(135deg,#3D6BFF,#8C3DFF); }
.g-3d1{ background:linear-gradient(135deg,#FFD23D,#3D6BFF); }
.g-3d2{ background:linear-gradient(135deg,#B6FF3D,#8C3DFF); }
.g-3d3{ background:linear-gradient(135deg,#FF3D7F,#B6FF3D); }

/* ===== SOBRE MI PAGE ===== */
.bio-section{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px;
  padding:0 clamp(20px,5vw,56px) 120px; align-items:start;
}
@media (max-width:820px){ .bio-section{ grid-template-columns:1fr; } }
.bio-photo{
  border-radius:24px; aspect-ratio:4/5; overflow:hidden;
  background:linear-gradient(135deg,#FF3D7F,#8C3DFF,#3D6BFF);
  background-size:200% 200%; animation:gradientshift 8s ease infinite;
}
.bio-text p{ font-size:1.05rem; line-height:1.7; color:rgba(21,16,31,0.78); margin-bottom:20px; }
.bio-text h3{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:1.3rem; margin:34px 0 14px; }
.skill-tags{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
.skill-tags span{
  font-family:'JetBrains Mono', monospace; font-size:0.75rem;
  border:1px solid var(--line); padding:7px 16px; border-radius:100px;
  background:rgba(255,255,255,0.5);
}

/* ===== CONTACTO PAGE ===== */
.contact-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:56px;
  padding:0 clamp(20px,5vw,56px) 140px; align-items:start;
}
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-form{ display:flex; flex-direction:column; gap:18px; }
.contact-form label{
  font-family:'JetBrains Mono', monospace; font-size:0.72rem;
  letter-spacing:0.06em; text-transform:uppercase; margin-bottom:6px; display:block;
  color:rgba(21,16,31,0.6);
}
.contact-form input, .contact-form textarea{
  width:100%; padding:14px 16px; border-radius:12px;
  border:1px solid var(--line); background:rgba(255,255,255,0.6);
  font-family:'Space Grotesk', sans-serif; font-size:0.95rem; color:var(--ink);
  transition:border-color .25s ease, background .25s ease;
}
.contact-form input:focus, .contact-form textarea:focus{
  outline:none; border-color:var(--pink); background:#fff;
}
.contact-form button{
  align-self:flex-start; margin-top:6px;
  background:var(--ink); color:var(--paper); border:none;
  padding:14px 28px; border-radius:100px; font-family:'Space Grotesk', sans-serif;
  font-size:0.92rem; font-weight:500; cursor:pointer;
  transition:transform .25s ease, background .25s ease;
}
.contact-form button:hover{ background:var(--pink); transform:translateY(-2px) rotate(-1deg); }
.contact-info{
  background:var(--ink); color:var(--paper); border-radius:24px; padding:44px;
}
.contact-info h3{ font-family:'Bricolage Grotesque',sans-serif; font-size:1.5rem; font-weight:700; margin-bottom:18px; }
.contact-info a{
  display:flex; align-items:center; justify-content:space-between;
  color:var(--paper); text-decoration:none; padding:14px 0;
  border-bottom:1px solid rgba(247,243,236,0.15); font-size:0.95rem;
  transition:padding-left .25s ease, color .25s ease;
}
.contact-info a:hover{ padding-left:8px; color:var(--lime); }

.gitem video.gimg{ width:100%; height:100%; object-fit:cover; display:block; background:#000; }
.gitem .play-badge{
  position:absolute; top:14px; right:14px; z-index:2;
  width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.92);
  display:flex; align-items:center; justify-content:center;
  transform:translateY(-6px); opacity:0; transition:all .35s ease;
}
.gitem:hover .play-badge{ transform:translateY(0); opacity:1; }
.gallery-wrap{ padding:0 clamp(20px,5vw,56px) 60px; }
.gallery-group{ margin-bottom:64px; }
.gallery-group h3{
  font-family:'Bricolage Grotesque', sans-serif; font-weight:700; font-size:1.5rem;
  margin-bottom:22px; letter-spacing:-0.01em;
}
.gallery-group .gallery{ padding:0; }
.embed-frame{ width:100%; height:100%; border:0; }

/* ===== SIMPLE VIDEO CARD (no hover/overlay conflicts with native controls) ===== */
.vcard{
  border-radius:18px; overflow:hidden; border:1px solid var(--line);
  background:#fff;
}
.vcard video{
  display:block; width:100%; aspect-ratio:16/9; background:#000;
}
.vcard-body{ padding:18px 20px; }
.vcard-tag{
  font-family:'JetBrains Mono', monospace; font-size:0.7rem; letter-spacing:0.06em;
  text-transform:uppercase; color:rgba(21,16,31,0.5); display:block; margin-bottom:6px;
}
.vcard-body h3{
  font-family:'Bricolage Grotesque', sans-serif; font-weight:700; font-size:1.1rem; margin-bottom:4px;
}
.vcard-body p{ font-size:0.88rem; color:rgba(21,16,31,0.65); line-height:1.4; }