:root{
  --bg:#0b0a10; --text:#f7f8fb; --muted:#cfd2dc; --card:#151523;
  --page-bg:#2832f1; /* general yellow background */
  --header-bg:#1c1325;
  --a1:#ff3d81; --a2:#ffb703; --a3:#00d1ff; --a4:#7cff4d; --a5:#7b2cbf;
  --r:18px;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; color:var(--text);
  /* Solid yellow background + subtle bicycle and grid pattern */
  background-color: var(--page-bg);
  background-image:
    linear-gradient(rgba(0,0,0,.75), rgba(0,0,0,.75)), /* dims bikes for contrast */
    url('img/bikes.svg'),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 1px, transparent 1px 48px);
  background-size: auto, 100px auto, 48px 48px, 48px 48px;
  background-position: center, center, center, center;
  background-attachment: fixed;
  background-blend-mode: multiply, normal, normal, normal;
  overflow-x:hidden}

/* Links: no underline globally */
a{ text-decoration: none }
a:hover{ text-decoration: none }

/* Fondo animado */
.bg-waves{position:fixed; inset:-20vmax; z-index:-2; filter:blur(40px); opacity:.8;
  background:
    radial-gradient(40vmax 40vmax at 10% 10%, #ff3d81 0 40%, transparent 70%),
    radial-gradient(35vmax 35vmax at 85% 15%, #00d1ff 0 40%, transparent 70%),
    radial-gradient(45vmax 45vmax at 30% 90%, #ffb703 0 40%, transparent 70%),
    radial-gradient(35vmax 35vmax at 90% 80%, #7cff4d 0 40%, transparent 70%),
    radial-gradient(30vmax 30vmax at 50% 50%, #7b2cbf 0 40%, transparent 70%);
  animation: drift 22s ease-in-out infinite alternate}
@keyframes drift{to{transform:translateY(-3vmax) translateX(2vmax) scale(1.03)}}
.sparkle{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.18}

/* Topbar */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem clamp(1rem,3vw,2rem);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(6px);
  box-shadow:0 12px 28px rgba(0,0,0,.2)}
.brand{display:flex; gap:1rem; align-items:center}
/* Logo and subtitle side-by-side */
.brand-text{display:flex; flex-direction:row; align-items:center; gap:.6rem}
.logo{width:clamp(160px, 24vw, 260px); filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))}
.brand-text .subtitle{margin:0; color:var(--muted)}
.nav a{color:var(--text); text-decoration:none; padding:.55rem .9rem; border-radius:999px; transition:.2s}
.nav a:hover{background:rgba(255,255,255,.08); transform:translateY(-2px)}
.nav .pill{background-image:linear-gradient(90deg,var(--a1),var(--a2),var(--a3)); color:#111; font-weight:800}

.grad{background:linear-gradient(90deg,var(--a1),var(--a2),var(--a3),var(--a4),var(--a5)); -webkit-background-clip:text; background-clip:text; color:transparent; margin:0}

/* Hero */
.hero{text-align:center; padding:clamp(2.2rem,6vw,5rem) 1rem}
.hero h2{font-size:clamp(2rem,6vw,3.2rem); margin:.2rem 0 1rem; text-shadow:0 6px 24px rgba(0,0,0,.25)}
.hero h3{font-weight:300; font-size:clamp(1.4rem,4vw,2.0rem); margin:.2rem 0 1.2rem}
.hero p{max-width:60ch; margin:0 auto 1.2rem; color:var(--muted)}
.btn{display:inline-block; padding:.9rem 1.15rem; border-radius:14px; font-weight:800; text-decoration:none; color:#111;
  background-image:linear-gradient(135deg,var(--a1),var(--a2),var(--a3)); box-shadow:0 10px 28px rgba(0,0,0,.28)}
.btn:hover{filter:saturate(1.05) brightness(1.05)}

/* Tarjetas */
.card{
  max-width:1200px; margin:2rem auto; padding:clamp(1rem,3.5vw,2rem);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  border-radius:var(--r); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(6px);
  box-shadow:0 20px 60px rgba(0,0,0,.25)
}

/* Sobre mí */
.about-grid{display:grid; grid-template-columns: 1.3fr .7fr; gap:2rem; align-items:stretch}
.about h3{font-size:clamp(1.3rem, 2.2vw, 1.6rem);}
.about p{font-size:clamp(1.05rem, 1.6vw, 1.2rem); line-height:1.7;}
.about .tags span{display:inline-block; margin:.25rem; padding:.35rem .7rem; border-radius:999px; font-weight:800; color:#111;
  background-image:linear-gradient(90deg,var(--a1),var(--a2),var(--a3),var(--a4))}
.iso{display:grid; place-items:center; background:radial-gradient(140px 140px at 30% 30%, rgba(255,255,255,.08), transparent); border-radius:var(--r);
  padding:0; border:1px dashed rgba(255,255,255,.25); overflow:hidden}
.iso img{width:100%; height:100%; max-width:none; object-fit:cover; display:block; filter:drop-shadow(0 8px 24px rgba(0,0,0,.35))}
@media (max-width:900px){.about-grid{grid-template-columns:1fr}}

/* Mosaic (masonry layout) */
.portfolio{max-width:1400px; margin:0 auto; padding:0 1rem 2rem}
.section-title{text-align:center; font-size:clamp(1.6rem,4vw,2.2rem); margin:2.2rem 0 1rem}
.masonry{column-count: 1; column-gap: 1rem}
@media (min-width: 680px){ .masonry{ column-count: 2 } }
@media (min-width: 1024px){ .masonry{ column-count: 3 } }
@media (min-width: 1400px){ .masonry{ column-count: 4 } }
.item{ break-inside: avoid; margin-bottom: 1rem; background:#0f0f17; border-radius: 14px; overflow:hidden; box-shadow:0 14px 34px rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.08) }
.item img{ width:100%; height:auto; display:block }
.note{ text-align:center; color:var(--muted); margin:.6rem 0 0 }

/* Contacto */
.contact h3{margin:0 0 .4rem}
.links{display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; margin:.4rem 0 0}
.links .contact-item{display:flex; align-items:center; gap:.6rem; color:#fff; font-weight:800}
.links .contact-item:hover{color:var(--a2)}
.icon{width:28px; height:28px; display:inline-block}

/* Pie */
.footer{ text-align:center; color:var(--muted); padding: 2rem 1rem 3rem }

/* Lightbox */
.lightbox{position:fixed; inset:0; background:rgba(10,10,16,.9); display:none; align-items:center; justify-content:center; z-index:10}
.lightbox.open{display:flex}
.lightbox img{max-width:min(92vw,1400px); max-height:88vh; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lightbox .close{position:absolute; top:18px; right:18px; width:44px; height:44px; border:none; border-radius:50%; cursor:pointer;
  background:linear-gradient(135deg,var(--a1),var(--a3)); color:#111; font-size:26px; font-weight:900; box-shadow:0 10px 30px rgba(0,0,0,.35)}