:root{
  --blue:#2563eb;
  --blue-ink:#1e3a8a;
  --red:#9b1c31;
  --red-ink:#6f1222;
  --bg:#0b1020;
  --surface:#0f172a;
  --card:#111827;
  --ink:#e5e7eb;
  --muted:#a3adc2;
  --border:#1f2937;
  --radius:18px;
  --radius-lg:26px;
  --shadow: 0 12px 40px rgba(2,6,23,.35);
  --container: min(1120px, 100% - 2rem);
  --space: clamp(.75rem, 1.2vw, 1rem);
  --space-lg: clamp(1.25rem, 2vw, 2rem);
  --fs-hero: clamp(2rem, 4vw, 3.25rem);
  --fs-h2: clamp(1.35rem, 2.2vw, 2rem);
}
*{ box-sizing: border-box }
html:focus-within{ scroll-behavior:smooth }
body{
  margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--ink);
  background: radial-gradient(1200px 600px at 10% -10%, #1f2a44 0%, rgba(31,42,68,0) 50%),
             radial-gradient(1000px 700px at 110% 10%, #2a1e2a 0%, rgba(42,30,42,0) 55%),
             var(--bg);
}
img{ max-width:100%; display:block }
a{ color:inherit }
.container{ width:var(--container); margin-inline:auto }
.small{ font-size:.9rem; color:var(--muted) }
.muted{ color:var(--muted) }
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{ left:1rem; top:1rem; width:auto; height:auto; background:#000; color:#fff; padding:.5rem 1rem; border-radius:8px; }

/* Header */
.site-header{ position:sticky; top:0; z-index:50; backdrop-filter: blur(10px); background: rgba(11,16,32,.55); border-bottom:1px solid var(--border); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 0 }
.brand{ display:flex; align-items:center; gap:.75rem; text-decoration:none; font-weight:800; letter-spacing:.2px }
.brand img{ width:36px; height:36px; object-fit:contain; border-radius:8px; background:#fff }
.brand span{ color:#fff }
.nav-links{ display:flex; align-items:center; gap:.5rem }
.nav-links a{ text-decoration:none; padding:.55rem .8rem; border-radius:10px; color:var(--muted); }
.nav-links a:hover{ color:#fff; background: #0f1a33 }
.cta{ background: linear-gradient(90deg, var(--blue), var(--red)); color:#fff; border:0; padding:.7rem 1rem; border-radius:12px; font-weight:700; text-decoration:none; box-shadow: var(--shadow); }

/* Hero */
.hero{ position:relative; padding: clamp(2.5rem, 6vw, 5rem) 0 2rem; }
.hero-content{ display:grid; gap:1rem; grid-template-columns: 1fr; align-items:center; }
.hero h1{ font-size: var(--fs-hero); margin:0; }
.hero p{ margin:0; color:var(--muted); max-width:60ch }
.hero .actions{ display:flex; gap:.75rem; margin-top:1rem }
.btn{ display:inline-block; padding:.85rem 1rem; border-radius:12px; border:1px solid #2b375b; background:#0f152d; color:#fff; text-decoration:none; font-weight:600; transition:.2s ease; }
.btn:hover{ transform: translateY(-1px); }
.btn-ghost{ background:transparent; border-color:#2b375b }
.btn.tiny{ padding:.55rem .8rem; font-size:.92rem }

/* Slider */
.slider{ position:relative; margin-top: clamp(1rem, 2vw, 1.5rem); }
.slides{ position:relative; overflow:hidden; border-radius: var(--radius-lg); border:1px solid var(--border); min-height: 340px }
.slide{ position:absolute; inset:0; padding: clamp(1rem, 2vw, 1.5rem); display:grid; grid-template-columns: 1fr 1.2fr; gap:1rem; align-items:center; background: linear-gradient(180deg, #0e142b, #0b1020); opacity:0; transform: scale(.98); transition: opacity .5s ease, transform .6s ease; }
.slide.is-active{ opacity:1; transform: scale(1); position:relative }
.slide figure{ margin:0; background: #0c1226; border:1px solid var(--border); border-radius:16px; height: 320px; display:grid; place-items:center }
.slide figure span{ opacity:.7; font-size:.95rem }
.slide h3{ margin:.25rem 0 .25rem; font-size:1.25rem }
.slide p{ color:var(--muted); margin:0 0 .75rem }
.badge{ display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .6rem; border-radius:999px; font-size:.8rem; border:1px solid #2d3a61; color:#c7d2fe; background:rgba(37,99,235,.12) }
.badge i{ width:8px; height:8px; border-radius:50%; display:inline-block; background: var(--blue) }
.slider-controls{ position:absolute; inset:auto 0 -18px 0; display:flex; align-items:center; justify-content:center; gap:.35rem }
.dot{ width:10px; height:10px; border-radius:50%; border:1px solid #3a4670; background:transparent; cursor:pointer }
.dot.is-active{ background: linear-gradient(90deg, var(--blue), var(--red)); border-color:transparent }
@media (max-width: 900px){ .slide{ grid-template-columns: 1fr; height:auto } .slide figure{ height:200px } }

/* Secciones */
.section{ padding: clamp(2.5rem, 6vw, 5rem) 0; }
.section.alt{ background: linear-gradient(180deg, rgba(15,23,42,.4) 0%, rgba(15,23,42,.2) 100%) }
.section h2{ font-size: var(--fs-h2); margin:0 0 1rem }

/* Cards de proyectos */
.grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap: var(--space); }
.cards > *{ grid-column: span 12; }
@media (min-width: 768px){ .cards > *{ grid-column: span 6 } }
@media (min-width: 1040px){ .cards > *{ grid-column: span 4 } }
.card{ background: var(--card); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow:hidden }
.card-media{ height: 180px; background:#0f152d; border-bottom:1px solid var(--border) }
.card-body{ padding: var(--space-lg) }
.card-body h3{ margin:.1rem 0 .35rem }
.card-body p{ margin:0 0 .8rem; color:var(--muted) }

/* Placeholders temáticos (reemplazar por imágenes) */
.card-media.vela{ background: linear-gradient(45deg, rgba(155,28,49,.35), rgba(37,99,235,.25)) }
.card-media.especias{ background: linear-gradient(45deg, rgba(37,99,235,.25), rgba(11,16,32,.65)) }
.card-media.barrio{ background: linear-gradient(45deg, rgba(37,99,235,.25), rgba(155,28,49,.35)) }
.card-media.parques{ background: linear-gradient(45deg, rgba(16,185,129,.25), rgba(37,99,235,.25)) }
.card-media.recetas{ background: linear-gradient(45deg, rgba(255,255,255,.08), rgba(155,28,49,.28)) }
.card-media.streaming{ background: linear-gradient(45deg, rgba(37,99,235,.35), rgba(0,0,0,.5)) }

/* Streaming */
.stream-box{ margin-top:1rem; height: 300px; border-radius:var(--radius); border:1px dashed var(--border); display:grid; place-items:center; color:var(--muted); background:#0f152d }

/* Formularios */
.form{ display:grid; gap:1rem; max-width:640px }
.form-row{ display:grid; gap:.35rem }
input, textarea{ width:100%; padding:.8rem 1rem; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--ink) }
input:focus, textarea:focus{ outline: 3px solid color-mix(in oklab, var(--blue) 30%, transparent); border-color: var(--blue) }
.form-msg{ margin:.25rem 0 0; color: var(--muted); min-height: 1.25rem }

/* Footer */
.site-footer{ border-top:1px solid var(--border); padding: 1.25rem 0 }