@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Pacifico&display=swap');

:root {
  --bg: #02030A;
  --bg-2: #061329;
  --panel: rgba(16, 33, 74, .55);
  --line: rgba(137, 216, 255, .18);
  --pink: #4DA7FF;
  --pink-2: #89D8FF;
  --orange: #89D8FF;
  --cream: #F7FBFF;
  --text: #F7FBFF;
  --muted: rgba(247, 251, 255, .60);
  --cyan: #89D8FF;
  --purple: #231F5A;
  --shadow: 0 0 35px rgba(77, 167, 255, .10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  font-family: Inter, system-ui, sans-serif;
  background:
    radial-gradient(circle at 18% 14%, rgba(77, 167, 255, .14), transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(35, 31, 90, .28), transparent 30%),
    radial-gradient(circle at 50% 82%, rgba(137, 216, 255, .08), transparent 38%),
    linear-gradient(180deg, #02030A 0%, #061329 45%, #10214A 72%, #02030A 100%);
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(131,196,255,.9) 0 1.2px, transparent 1.9px),
    radial-gradient(circle, rgba(198,176,255,.75) 0 .9px, transparent 1.6px);
  background-size: 74px 74px, 121px 121px, 173px 173px;
  background-position: 0 0, 29px 47px, 81px 16px;
  opacity: .56;
}

.stars { position: fixed; inset: 0; pointer-events: none; z-index: -1; }
.stars::before, .stars::after { content:""; position:absolute; width:3px; height:3px; background:#fff; border-radius:50%; box-shadow: 120px 80px #bfe6ff, 280px 190px #fff, 440px 60px #8cbcff, 610px 260px #d7c8ff, 800px 100px #fff, 990px 230px #77b9ff, 1130px 60px #fff, 140px 520px #dcefff, 390px 460px #9ec8ff, 720px 540px #a78dff, 930px 470px #fff, 1180px 600px #75b7ff; filter: drop-shadow(0 0 4px #8ecbff); animation: twinkle 4s ease-in-out infinite alternate; }
.stars-b::before { top: 40%; left: 5%; transform: scale(.7); opacity: .5; animation-delay: 1.2s; }
@keyframes twinkle { to { opacity: .35; filter: blur(.3px); } }

.page-shell { width: min(1470px, calc(100% - 28px)); margin: 14px auto 22px; }
.panel { background: linear-gradient(145deg, rgba(6,19,41,.90), rgba(2,3,10,.92)); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }

.topbar { min-height: 82px; display:flex; align-items:center; justify-content:space-between; padding: 0 36px; position:sticky; top:10px; z-index:20; backdrop-filter: blur(18px); }
.brand { font-family: Pacifico, cursive; font-size: 34px; color: #fff; text-decoration:none; text-shadow: 0 0 8px var(--pink), 0 0 18px var(--pink); }
.brand span { font-family: Inter; font-size: 17px; color: var(--cream); vertical-align: top; }
.nav { display:flex; align-items:center; gap:48px; }
.nav a { color: #F7FBFF; text-decoration:none; font-size:13px; font-weight:700; letter-spacing:.02em; position:relative; }
.nav a::after { content:""; position:absolute; left:0; right:0; bottom:-13px; margin:auto; width:0; height:2px; background:var(--pink); transition:.25s; }
.nav a:hover::after, .nav a.active::after { width:100%; }
.nav a.active { color:var(--pink-2); }
.contact-btn { text-decoration:none; color:#89D8FF; border:1px solid var(--pink); border-radius:9px; padding:14px 20px; font-size:13px; font-weight:800; box-shadow: inset 0 0 20px rgba(255,46,141,.08); }
.menu-toggle { display:none; }

main { display:grid; gap:18px; margin-top:18px; }
.hero { min-height:720px; display:grid; grid-template-columns: .9fr 1.1fr; overflow:hidden; position:relative; }
.hero-copy { padding: 110px 28px 70px 74px; z-index:2; }
.eyebrow { display:block; color:var(--orange); font-weight:800; font-size:27px; letter-spacing:.02em; margin-bottom:20px; }
.hero h1 { margin:0; font-size: clamp(58px, 7vw, 96px); line-height:.95; letter-spacing:-.05em; }
.hero h1 span { color:var(--pink); text-shadow:0 0 22px rgba(255,46,141,.35); }
.role { font-size:18px; color:var(--pink-2); font-weight:600; margin:30px 0 20px; }
.role b { color:var(--orange); margin:0 7px; }
.intro { color:rgba(247,251,255,.82); max-width:590px; line-height:1.9; font-size:17px; }
.hero-actions { display:flex; gap:18px; margin-top:36px; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:0 28px; border-radius:8px; text-decoration:none; color:#fff; font-weight:800; font-size:14px; letter-spacing:.01em; transition:.25s; }
.btn.primary { background:linear-gradient(90deg, #4DA7FF, #89D8FF); box-shadow:0 12px 30px rgba(77,167,255,.25); }
.btn.ghost { border:1px solid var(--pink); background:rgba(77,167,255,.04); }
.btn:hover { transform:translateY(-3px); filter:brightness(1.08); }
.socials { display:flex; gap:26px; margin-top:40px; }
.socials a { color:var(--pink); text-decoration:none; font-size:26px; font-weight:800; }

.hero-art { position:relative; min-height:720px; display:flex; align-items:center; justify-content:center; }
.moon { position:absolute; width:min(520px, 72%); aspect-ratio:1; border-radius:50%; right:7%; top:8%; background:radial-gradient(circle at 36% 32%, #89D8FF 0 7%, #4DA7FF 32%, #10214A 62%, #231F5A 100%); box-shadow:0 0 90px rgba(77,167,255,.38); opacity:.94; }
.moon::after { content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at 70% 30%, rgba(255,255,255,.12) 0 5%, transparent 6%), radial-gradient(circle at 32% 60%, rgba(35,31,90,.25) 0 7%, transparent 8%), radial-gradient(circle at 65% 72%, rgba(35,31,90,.19) 0 12%, transparent 13%); }
.art-frame { width:min(620px, 85%); aspect-ratio:.77; margin-top:70px; z-index:2; border-radius:34px; overflow:hidden; transform:rotate(-1deg); box-shadow:0 22px 70px rgba(0,0,0,.5), 0 0 0 3px rgba(137,216,255,.30); }
.art-frame img { width:100%; height:100%; object-fit:cover; object-position:center 12%; filter:saturate(1.1) contrast(1.05); transform:scale(1.03); }
.art-frame::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(2,3,10,.45), transparent 35%); pointer-events:none; }
.spark { position:absolute; z-index:4; color:var(--orange); text-shadow:0 0 12px currentColor; animation:float 3s ease-in-out infinite; }
.s1{font-size:40px;left:8%;top:30%}.s2{font-size:31px;right:6%;top:20%;animation-delay:.8s}.s3{font-size:26px;right:16%;bottom:17%;animation-delay:1.5s}
@keyframes float { 50% { transform:translateY(-12px) rotate(10deg); } }

.section-grid { display:grid; grid-template-columns: 1fr 340px; gap:18px; }
.about, .quote, .projects, .gallery, .contact { padding:28px 34px 32px; }
h2 { margin:0; font-size:24px; }
h2 span { color:var(--orange); }
.about-content { display:grid; grid-template-columns:280px 1fr; gap:34px; align-items:center; margin-top:26px; }
.portrait-wrap { height:300px; border-radius:12px; overflow:hidden; border:1px solid rgba(137,216,255,.18); }
.portrait-wrap img { width:100%; height:100%; object-fit:cover; object-position:center 16%; }
.about h3 { color:#F7FBFF; font-size:23px; }
.about p { color:rgba(247,251,255,.75); line-height:1.8; }
.mini-btn { display:inline-block; color:#89D8FF; border:1px solid var(--pink); border-radius:7px; padding:12px 17px; text-decoration:none; font-weight:800; font-size:13px; margin-top:8px; }
.quote { min-height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; position:relative; }
.quote p { font-family:cursive; font-size:25px; line-height:1.65; color:#F7FBFF; }
.quote-star { position:absolute; top:24px; right:28px; color:var(--orange); font-size:30px; }
.quote-heart { position:absolute; bottom:22px; right:28px; color:var(--pink); font-size:34px; }

.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px; }
.section-heading a, .section-heading p { color:var(--pink-2); text-decoration:none; font-size:13px; font-weight:700; }
.project-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.project-card { padding:16px; border-radius:11px; border:1px solid rgba(255,56,145,.4); background:linear-gradient(180deg, rgba(46,12,71,.58), rgba(11,8,38,.85)); transition:.25s; }
.project-card:hover { transform:translateY(-6px); box-shadow:0 15px 35px rgba(255,46,141,.16); }
.project-art { height:180px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:76px; overflow:hidden; position:relative; }
.project-art::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size:16px 16px; }
.project-art.pc { background:linear-gradient(145deg,#61146d,#ff397e); }.project-art.ball{background:linear-gradient(145deg,#104e7a,#ff5c83)}.project-art.vn{background:linear-gradient(145deg,#6d164e,#f284bb)}.project-art.radio{background:linear-gradient(145deg,#2c125a,#e52d86)}
.project-card h3 { margin:17px 0 7px; font-size:18px; }.project-card p { margin:0; color:var(--muted); font-size:14px; }
.tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }.tags span { border:1px solid #231F5A; color:#a783ff; border-radius:999px; padding:5px 10px; font-size:11px; }.tags span:nth-child(2){border-color:#ff9a23;color:#ffb24e}

.gallery-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.gallery figure { margin:0; position:relative; height:400px; border-radius:12px; overflow:hidden; border:1px solid rgba(137,216,255,.18); background:#061329; }
.gallery img { width:100%; height:100%; object-fit:cover; transition:.4s; }
.gallery figure:hover img { transform:scale(1.06); }
.gallery figcaption { position:absolute; left:12px; right:12px; bottom:12px; padding:11px 14px; border-radius:8px; background:rgba(2,3,10,.75); backdrop-filter:blur(10px); font-weight:700; }

.contact { display:flex; align-items:center; justify-content:space-between; gap:28px; padding-top:40px; padding-bottom:40px; }
.contact h2 { font-size:clamp(28px,4vw,50px); margin:10px 0; }.contact p { color:var(--muted); }
.footer { min-height:80px; margin-top:18px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }.brand.small{font-size:27px}.footer p{color:rgba(247,251,255,.60);font-size:13px}

@media (max-width: 1050px) {
  .nav { gap:22px; }.contact-btn{display:none}.hero{grid-template-columns:1fr}.hero-copy{padding:80px 42px 20px}.hero-art{min-height:600px}.section-grid{grid-template-columns:1fr}.quote{min-height:230px}.project-grid,.gallery-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 760px) {
  .page-shell{width:min(100% - 14px,1470px);margin-top:7px}.topbar{padding:0 18px;min-height:70px}.menu-toggle{display:block;background:none;border:0;color:#fff;font-size:25px}.nav{display:none;position:absolute;top:76px;left:7px;right:7px;padding:18px;background:#061329;border:1px solid var(--line);border-radius:12px;flex-direction:column;align-items:flex-start}.nav.open{display:flex}.brand{font-size:28px}.hero{min-height:auto}.hero-copy{padding:58px 24px 30px}.hero h1{font-size:57px}.eyebrow{font-size:22px}.hero-actions{flex-direction:column;align-items:stretch}.hero-art{min-height:490px}.art-frame{margin-top:15px;width:88%}.moon{right:6%;top:7%;width:78%}.about,.quote,.projects,.gallery,.contact{padding:24px 18px}.about-content{grid-template-columns:1fr}.portrait-wrap{height:350px}.project-grid,.gallery-grid{grid-template-columns:1fr}.gallery figure{height:500px}.contact{align-items:flex-start;flex-direction:column}.footer{flex-direction:column;justify-content:center;gap:4px;text-align:center;padding:18px}.section-heading{align-items:flex-start;flex-direction:column}.section-heading p{margin:0}.socials{justify-content:center}
}

/* Paleta de mis colores */
:root{
  --bg:#02030A;
  --bg-2:#061329;
  --panel:rgba(16,33,74,.55);
  --line:rgba(137,216,255,.18);
  --pink:#4DA7FF;
  --pink-2:#89D8FF;
  --orange:#89D8FF;
  --cream:#F7FBFF;
  --text:#F7FBFF;
  --muted:rgba(247,251,255,.60);
  --purple:#231F5A;
  --shadow:0 0 35px rgba(77,167,255,.10);
}
.panel{
  background:linear-gradient(145deg,rgba(16,33,74,.55),rgba(2,3,10,.82));
  border-color:rgba(137,216,255,.18);
}
.btn.primary{
  color:#02030A;
  background:linear-gradient(90deg,#4DA7FF,#89D8FF);
}


/* Barra superior */
.top-socials{display:flex;gap:15px}
.top-socials a{
  color:#89D8FF;
  text-decoration:none;
  font-size:12px;
  font-weight:800;
}

/* Gustos y hobbies */
.hobbies-list{
  margin:20px 0;
  padding:18px 20px;
  border:1px solid rgba(137,216,255,.18);
  border-radius:10px;
  background:rgba(6,19,41,.46);
}
.hobbies-list h4{margin:0 0 12px;color:#89D8FF;font-size:15px}
.hobbies-list ul{margin:0;padding-left:19px;color:rgba(247,251,255,.75);line-height:1.75}
.hobbies-list li::marker{color:#4DA7FF}
/* OCs principales */
.ocs-showcase{
    padding:28px 32px;
}

.small-label{
    display:block;
    margin-bottom:8px;
    color:#89D8FF;
    font-size:11px;
    font-weight:800;
    letter-spacing:.12em;
}

.oc-feature-list{
    display:grid;
    gap:16px;
}

.oc-feature{
    display:grid;
    grid-template-columns:42% 58%;
    min-height:390px;
    overflow:hidden;
    border:1px solid rgba(137,216,255,.18);
    border-radius:14px;
    background:linear-gradient(145deg,rgba(6,19,41,.82),rgba(2,3,10,.92));
}

.oc-feature.reverse{
    grid-template-columns:58% 42%;
}

.oc-feature.reverse .oc-feature-image{
    order:2;
}

.oc-feature-image{
    min-height:390px;
    background:#061329;
}

.oc-feature-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.oc-feature-copy{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:40px;
}

.oc-count{
    position:absolute;
    top:18px;
    right:20px;
    color:rgba(77,167,255,.24);
    font-size:42px;
    font-weight:800;
}

.oc-feature-copy h3{
    margin:8px 0 16px;
    color:#F7FBFF;
    font-size:clamp(38px,4vw,56px);
    line-height:1;
    letter-spacing:-.03em;
}

.oc-feature-copy p{
    max-width:460px;
    color:rgba(247,251,255,.70);
    line-height:1.65;
    font-size:15px;
}

.oc-feature-copy a{
    width:max-content;
    margin-top:14px;
    color:#89D8FF;
    font-weight:800;
    font-size:13px;
}
/* ARTE Y FANARTS */
.art-gallery-section{padding:36px 40px}
.gallery-filters{display:flex;flex-wrap:wrap;gap:10px;margin:-5px 0 26px}
.filter-button{
  padding:9px 14px;
  border:1px solid rgba(137,216,255,.18);
  border-radius:999px;
  background:rgba(6,19,41,.55);
  color:rgba(247,251,255,.70);
  cursor:pointer;
  font-size:12px;
  font-weight:800;
}
.filter-button.active,.filter-button:hover{
  background:#89D8FF;
  color:#02030A;
  border-color:#89D8FF;
}

.art-masonry{
  columns:4 260px;
  column-gap:16px;
}

.art-card{
  display:inline-block;
  width:100%;
  margin:0 0 16px;
  break-inside:avoid;
  overflow:hidden;
  border:1px solid rgba(137,216,255,.18);
  border-radius:12px;
  background:#061329;
  vertical-align:top;
}

.art-card.is-hidden{display:none}

.art-open{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  margin:0;
  border:0;
  background:none;
  color:#F7FBFF;
  cursor:zoom-in;
  line-height:0;
}

.art-open img{
  display:block;
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
  transition:transform .35s ease,filter .35s ease;
}

.art-card:hover .art-open img{
  transform:scale(1.025);
  filter:brightness(.92);
}

.art-open figcaption{
  position:absolute;
  left:10px;
  bottom:10px;
  padding:8px 10px;
  border-radius:7px;
  background:rgba(2,3,10,.80);
  color:#F7FBFF;
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  opacity:0;
  transform:translateY(5px);
  transition:.2s;
}

.art-card:hover figcaption{
  opacity:1;
  transform:none;
}

/* imagenes */
.lightbox{
  width:min(1100px,92vw);
  max-height:92vh;
  padding:0;
  border:1px solid rgba(137,216,255,.18);
  border-radius:14px;
  background:#02030A;
  color:#F7FBFF;
  overflow:hidden;
}
.lightbox::backdrop{background:rgba(0,0,0,.86);backdrop-filter:blur(8px)}
.lightbox img{width:100%;max-height:82vh;object-fit:contain;background:#000}
.lightbox p{margin:0;padding:13px 17px;color:rgba(247,251,255,.65)}
.lightbox-close{
  position:absolute;
  top:12px;
  right:12px;
  z-index:2;
  width:40px;
  height:40px;
  border:1px solid rgba(137,216,255,.18);
  border-radius:50%;
  background:rgba(2,3,10,.8);
  color:#F7FBFF;
  font-size:25px;
  cursor:pointer;
}

@media(max-width:1050px){
  .top-socials{display:none}
  .oc-feature,.oc-feature.reverse{grid-template-columns:1fr}
  .oc-feature.reverse .oc-feature-image{order:0}
  .oc-feature-image{min-height:480px}
}
@media(max-width:760px){
  .ocs-showcase,.art-gallery-section{padding:24px 18px}
  .oc-feature-image{min-height:380px}
  .oc-feature-copy{padding:32px 24px}
  .oc-count{font-size:38px}
  .art-masonry{columns:2 150px;column-gap:10px}
}


/* CORRECCIÓN DE LA GALERÍA porq estaba toda bug */
.gallery .art-masonry{
  columns:4 260px;
  column-gap:16px;
}

.gallery .art-card{
  display:inline-block !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 0 16px !important;
  break-inside:avoid !important;
  overflow:hidden !important;
  vertical-align:top !important;
}

.gallery .art-card .art-open{
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  line-height:0 !important;
}

.gallery .art-card .art-open img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center !important;
}

.gallery .art-card figcaption{
  height:auto !important;
}

@media(max-width:1050px){
  .gallery .art-masonry{
    columns:3 220px;
  }
}

@media(max-width:760px){
  .gallery .art-masonry{
    columns:2 145px;
    column-gap:10px;
  }

  .gallery .art-card{
    margin-bottom:10px !important;
  }
}
/* MARCA DE AGUA */

.watermark{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:9999;

    display:flex;
    align-items:center;
    gap:12px;

    padding:10px 14px;

    border:2px solid rgba(255,255,255,.35);
    border-radius:999px;

    background:rgba(245,241,232,.78);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    color:#333;
    text-decoration:none;
    font-size:.85rem;
    line-height:1.15;

    box-shadow:0 8px 18px rgba(0,0,0,.15);
    transition:.25s;
}

.watermark img{
    width:42px;
    height:42px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid #444;
}

.watermark:hover{
    transform:scale(1.05) rotate(-2deg);
}

@media (max-width:600px){
    .watermark{
        right:12px;
        bottom:12px;
        padding:8px 12px;
        font-size:.75rem;
    }

    .watermark img{
        width:32px;
        height:32px;
    }
}