/*
  Luca Costabile - Portfolio
  Estilos base, layout responsive, accesibilidad y un look moderno.
*/
:root{
  --bg: #0b1220;
  --bg-alt: #0e1626;
  --surface: #101827;
  --text: #e5e7eb;
  --muted: #9aa4b2;
  --accent: #60a5fa;
  --accent-2: #34d399;
  --border: #1f2a44;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 14px;
}
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: radial-gradient(1200px 600px at 80% -10%, rgba(56,189,248,.15), transparent),
              radial-gradient(1000px 600px at -20% 10%, rgba(99,102,241,.12), transparent),
              var(--bg);
}
img{ max-width:100%; height:auto; display:block; }
.container{ width:min(1100px, 92%); margin-inline:auto; }

/* Header */
.site-header{
  position: sticky; top:0; z-index:40; backdrop-filter: saturate(1.2) blur(10px);
  background: rgba(11,18,32,.6); border-bottom:1px solid var(--border);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding: .9rem 0; }
.logo{ color:#fff; font-weight:800; letter-spacing:.5px; text-decoration:none; font-size:1.1rem; background:linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.primary-nav ul{ list-style:none; display:flex; gap:1rem; margin:0; padding:0; }
.primary-nav a{ color: var(--muted); text-decoration:none; padding:.5rem .7rem; border-radius:8px; }
.primary-nav a:hover, .primary-nav a:focus{ color:#fff; background: rgba(96,165,250,.1); }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:.3rem; }
.nav-toggle span{ display:block; width:24px; height:2px; background:#d1d5db; margin:5px 0; transition:.2s; }

/* Hero */
.hero{ position:relative; padding: 5rem 0 3rem; overflow: clip; }
.hero-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap:2rem; align-items:center; }
.hero-text h1{ font-size: clamp(2rem, 3.8vw + .5rem, 3.4rem); line-height:1.05; margin:.2rem 0 .8rem; }
.hero-text .accent{ color: var(--accent); }
.subtitle{ color: var(--muted); font-size: clamp(1rem, 1.2vw + .6rem, 1.3rem); }
.cta-group{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.2rem; }
.btn{ display:inline-flex; align-items:center; gap:.4rem; padding:.7rem 1rem; border-radius:10px; text-decoration:none; font-weight:600; border:1px solid transparent; }
.btn.primary{ background: linear-gradient(135deg, #3b82f6, #06b6d4); color:#fff; }
.btn.outline{ color:#cbd5e1; border-color:#334155; background: transparent; }
.btn.ghost{ color:#9ca3af; background: transparent; }
.btn.small{ padding:.5rem .75rem; font-weight:600; }
.hero-media{ justify-self:center; width:min(360px, 80%); filter: drop-shadow(0 35px 60px rgba(2,6,23,.55)); }
.hero-media img{ border-radius: 22px; border:1px solid var(--border); }
.hero-bg{ position:absolute; inset:-20% -10% -40% -10%; background: radial-gradient(700px 400px at 60% 0%, rgba(34,197,94,.08), transparent), radial-gradient(600px 400px at 0% 40%, rgba(59,130,246,.08), transparent); z-index:-1; }

/* Sections */
.section{ padding: 4rem 0; }
.section.alt{ background: linear-gradient(to bottom, rgba(2,6,23,.35), rgba(2,6,23,.2)); border-block:1px solid var(--border); }
.section h2{ font-size: clamp(1.6rem, 2.5vw + .6rem, 2.2rem); margin:0 0 1.4rem; }
.lead{ color: var(--muted); }

/* Timeline */
.timeline{ position:relative; margin-top:1.5rem; padding-left:1.4rem; }
.timeline:before{ content:""; position:absolute; left:.5rem; top:.2rem; bottom:.2rem; width:2px; background:#23314f; }
.timeline-item{ position:relative; margin: 1rem 0 1rem; }
.timeline-dot{ position:absolute; left:-.1rem; top:.2rem; width:10px; height:10px; background: var(--accent); border-radius:50%; box-shadow:0 0 0 4px rgba(96,165,250,.25); }
.timeline-content{ background: var(--surface); border:1px solid var(--border); border-radius:12px; padding: .9rem 1rem; box-shadow: var(--shadow); }
.timeline-content h3{ margin:.2rem 0 .3rem; font-size:1rem; color:#cbd5e1; }
.timeline p{ color: var(--muted); margin:.2rem 0 0; }

/* Skills */
.skills-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; }
.skill-card{ background: var(--surface); border:1px solid var(--border); border-radius:12px; padding:1rem; box-shadow: var(--shadow); }
.skill-card h3{ margin:.2rem 0 1rem; font-size:1.05rem; color:#e2e8f0; }
.skill-card li{ color: var(--muted); margin:.2rem 0; }

/* Projects */
.projects-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1.2rem; }
.project-card{ background: var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow: var(--shadow); display:grid; grid-template-rows: auto 1fr; }
.project-media img{ width:100%; aspect-ratio: 16/9; object-fit: cover; }
.project-content{ padding:1rem; }
.project-content h3{ margin:.2rem 0 .4rem; }
.project-content .tech{ color: var(--muted); font-size:.95rem; }
.project-actions{ margin-top:.8rem; }

/* Experience */
.experience-card{ background: var(--surface); border:1px solid var(--border); border-radius:12px; padding:1rem; box-shadow: var(--shadow); }
.experience-card .meta{ color: var(--muted); margin:.1rem 0 .8rem; }
.experience-card li{ margin:.4rem 0; }

/* Education */
.edu-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:1rem; }
.edu-card{ background: var(--surface); border:1px solid var(--border); border-radius:12px; padding:1rem; box-shadow: var(--shadow); }
.edu-card .meta{ color: var(--muted); margin:.3rem 0 .5rem; }

/* Certifications */
.cert-list{ display:grid; grid-template-columns: repeat(2, 1fr); gap:.7rem; padding-left:1rem; }
.cert-list li{ background: var(--surface); border:1px solid var(--border); border-radius:10px; padding:.7rem .8rem; list-style: "🎖 "; }
.badge{ display:inline-block; margin-left:.6rem; padding:.2rem .5rem; border-radius:999px; font-size:.85rem; text-decoration:none; color:#0b1220; background: linear-gradient(135deg, #34d399, #a7f3d0); }

/* Contact */
.contact-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap:1.2rem; margin-top:1rem; }
.contact-info ul{ list-style:none; padding:0; margin:0; }
.contact-info li{
  margin:.5rem 0;
  color: #e2e8f0;
  background: var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:.7rem .9rem;
  display:flex; align-items:center; gap:.6rem;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.contact-info li:hover,
.contact-info li:focus-within{
  border-color: rgba(96,165,250,.55);
  background: linear-gradient(0deg, rgba(96,165,250,.08), rgba(96,165,250,.08)), var(--surface);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(2,6,23,.35);
}
.contact-info a{
  color:#e5e7eb; text-decoration:none; flex:1;
}
.contact-info a:focus{ outline: none; }
.contact-info li:focus-within .contact-info a{ outline: none; }
.contact-form{ background: var(--surface); border:1px solid var(--border); border-radius:12px; padding:1rem; box-shadow: var(--shadow); }
.contact-form label{ display:block; font-weight:600; margin:.7rem 0 .3rem; color:#cbd5e1; }
.contact-form input, .contact-form textarea{
  width:100%; color:#e5e7eb; background:#0f172a; border:1px solid #26324d; border-radius:10px; padding:.7rem .8rem; outline:none; }
.contact-form input:focus, .contact-form textarea:focus{ border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.2) }
.form-note{ color: var(--muted); font-size:.9rem; margin-top:.5rem; }
.form-message{ margin-top:.7rem; padding:.6rem .8rem; border-radius:10px; font-size:.95rem; border:1px solid transparent; }
.form-message.info{ background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.25); color:#cfe1ff; }
.form-message.error{ background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.25); color:#fecaca; }
.form-message.success{ background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.25); color:#bbf7d0; }

/* Footer */
.site-footer{ padding:2rem 0; border-top:1px solid var(--border); background: rgba(11,18,32,.4); }
.site-footer p{ color: var(--muted); text-align:center; margin:0; }

/* Responsive */
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; text-align:center; }
  .hero-media{ order:-1; }
  .skills-grid{ grid-template-columns: repeat(2, 1fr); }
  .projects-grid{ grid-template-columns: repeat(2, 1fr); }
  .edu-grid{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 700px){
  .primary-nav{ position:fixed; inset:60px 0 auto 0; background:#0b1220; border-bottom:1px solid var(--border); transform: translateY(-120%); transition: .25s ease; }
  .primary-nav.open{ transform: translateY(0); }
  .primary-nav ul{ flex-direction:column; gap:0; }
  .primary-nav a{ display:block; padding: 1rem; border-radius:0; border-top:1px solid rgba(255,255,255,.03); }
  .nav-toggle{ display:block; }
}