:root{
  --bg:#0a0f1e;
  --bg-2:#0d1426;
  --ink:#f7fafc;
  --muted:#9fb0c8;
  --line:#28324a;
  --card:#121a2f;
  --accent:#6ea8ff;
  --accent-2:#1ed6ff;
  --shadow-lg:0 30px 80px rgba(0,0,0,.55);
  --shadow-md:0 20px 50px rgba(0,0,0,.45);
  --radius:22px;
  --container:1280px;

  /* tipografía grande */
  --fs-display: clamp(28px, 4.6vw, 46px);
  --fs-lead: clamp(16px, 2.1vw, 20px);
  --fs-h2: clamp(18px, 2.2vw, 24px);
  --fs-body: 16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"SF Pro Text",Segoe UI,Roboto,Ubuntu,"Noto Sans",sans-serif;
  color:var(--ink);
  background: radial-gradient(80vw 60vh at 20% -10%, #20315e 0%, transparent 60%),
             radial-gradient(80vw 60vh at 100% -20%, #0f89ff33 0%, transparent 55%),
             linear-gradient(180deg, var(--bg), var(--bg-2));
  background-attachment: fixed;
}

/* ================= HERO BAND ================= */
.hero-band{
  position:relative;
  padding: clamp(28px, 5vw, 56px) 0 18px;
}
.hero-band__inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display:grid;
  grid-template-columns: 340px 1fr;
  gap: clamp(20px, 4vw, 48px);
  align-items:center;
}
@media (max-width: 900px){
  .hero-band__inner{ grid-template-columns: 1fr; }
  .hero-photo{ max-width: 180px; margin: 0 auto 12px; }
}
.hero-photo{
  margin:0;
  max-width: 240px; /* antes 260px → ahora 20% más pequeño */
  border-radius: 22px;
  overflow:hidden;
  box-shadow: var(--shadow-lg);
  border:1px solid rgba(255,255,255,.08);
}
.hero-photo img{
  display:block; width:100%; height:100%; object-fit:cover;
}
.hero-copy .overline{
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin: 4px 0 8px; font-size:12px;
}
.display{ margin:0 0 8px; font-size: var(--fs-display); font-weight: 850; line-height:1.05; }
.lead{ margin: 6px 0 14px; font-size: var(--fs-lead); color: var(--muted); }
.contacts{display:flex;flex-wrap:wrap;gap:10px 18px;list-style:none;margin:0;padding:0;color:var(--muted)}
.link{color:var(--accent); font-weight:650; text-decoration:none}
.link:hover{text-decoration:underline}

/* Skills strip */
.skills-strip-wrap{ max-width: var(--container); margin: 16px auto 0; padding: 0 24px; }
.skills-strip{
  display:flex; gap:12px; overflow-x:auto; padding:12px 2px 14px; scroll-snap-type:x mandatory;
}
.skills-strip::-webkit-scrollbar{height:8px}
.skills-strip::-webkit-scrollbar-thumb{background:#1a243e;border-radius:999px}
.skill-chip{
  scroll-snap-align:start;
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 14px; border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  color:var(--ink); font-weight:700; font-size:14px;
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease;
}
.skill-chip img{width:20px; height:20px; object-fit:contain}
.skill-chip .dot{width:8px; height:8px; border-radius:999px; background:linear-gradient(180deg,var(--accent),var(--accent-2)); box-shadow:0 0 12px rgba(110,168,255,.6)}
.skill-chip:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Subnav */
.subnav{
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  background: rgba(10,15,30,.65);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.subnav{ display:flex; gap:12px; max-width: var(--container); margin:0 auto; padding:12px 24px; }
.subnav a{ color:var(--ink); text-decoration:none; font-weight:700; font-size:14px; opacity:.9 }
.subnav a:hover{ color: var(--accent) }

/* ================= SECTIONS ================= */
main{ max-width: var(--container); margin:0 auto; padding: 28px 24px 56px; }

.section{ margin: clamp(28px,6vw,64px) 0; }
.section-head{ display:flex; align-items:baseline; gap:14px; margin-bottom: 18px; }
.section-head h2{ margin:0; font-size: var(--fs-h2); font-weight: 850; }
.section-head p{ margin:0; color:var(--muted) }
.section-num{
  font-weight:900; font-size: clamp(18px,3vw,22px);
  color:#1ed6ff; -webkit-text-stroke: 2px rgba(255,255,255,.25);
}

.grid{ display:grid; gap: 18px; }
.grid-2{ grid-template-columns: 1.4fr 1fr; }
.grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px; }
@media (max-width: 980px){ .grid-2{ grid-template-columns: 1fr } .grid-3{ grid-template-columns: 1fr 1fr } }
@media (max-width: 640px){ .grid-3{ grid-template-columns: 1fr } }

.panel{
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding: clamp(16px, 2.8vw, 28px);
  box-shadow: var(--shadow-md);
}
.text-xl{ font-size: clamp(16px, 2vw, 18px); line-height:1.7; }

.h6{ margin:0 0 10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:#cfe0ff; font-size:12px}
.list{ margin:0; padding-left: 18px; color: var(--ink) }

/* Timeline */
.timeline{ list-style:none; margin:0; padding:0; border-left:2px solid rgba(255,255,255,.14); margin-left: 10px; }
.timeline-item{ position:relative; padding-left:18px; margin: 0 0 18px }
.timeline-item::before{
  content:""; position:absolute; left:-7px; top:10px; width:10px; height:10px; border-radius:999px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  box-shadow:0 0 18px rgba(30,214,255,.45);
}
.timeline-card{ background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:16px; box-shadow: var(--shadow-md) }
.item-head{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.meta{ color: var(--muted); font-size: 13px }
.bullets{ margin:8px 0 0 18px }

/* Projects */
.card{ display:block; border:1px solid rgba(255,255,255,.12); border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); text-decoration:none; color:var(--ink); box-shadow:var(--shadow-md); transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease; }
.card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.project__body{ padding: 18px }
.project__body h3{ margin: 0 0 8px; font-size: 18px }
.project__body p{ margin:0; color: var(--muted) }

/* CTA */
.cta{ margin: clamp(36px,7vw,80px) 0 0 }
.cta__inner{
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(110,168,255,.18), rgba(30,214,255,.14));
  padding: clamp(18px, 5vw, 36px);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  border:1px solid rgba(255,255,255,.22);
  box-shadow: var(--shadow-lg);
}
.cta__inner h3{ margin:0; font-size: clamp(18px,2.6vw,24px) }
.cta__inner p{ margin:0; color:#d8e6ff }
.btn{
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color:#081024; font-weight:900; border:0; border-radius: 999px; padding: 12px 18px; text-decoration:none;
  box-shadow: 0 14px 30px rgba(30,214,255,.25);
}
.btn:hover{ filter: brightness(1.05) }

/* Footer */
.site-footer{ text-align:center; color:var(--muted); padding: 40px 24px }

/* Performance helpers */
.skills-strip{ transform: translateZ(0); will-change: scroll-position; }

/* Modo rendimiento (auto) */
html.perf .hero-band,
html.perf .subnav,
html.perf .panel,
html.perf .card,
html.perf .skill-chip{ backdrop-filter:none; -webkit-backdrop-filter:none }
html.perf .bg-veil{ display:none }