/* --- Reset mínimo + variables --- */
* { box-sizing: border-box; }
:root{
  --brand:#0099ff;
  --brand-700:#0077cc;
  --bg:#f6f9fc;
  --text:#0b1320;
  --muted:#5b6b7a;
  --card:#ffffff;
  --radius:14px;
  --shadow:0 8px 24px rgba(2,18,36,.08);
}

html,body{ margin:0; padding:0; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
}

/* --- Header / Nav --- */
.site-header{
  background:var(--brand);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 20px;
  position:sticky;
  top:0; z-index:10;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.brand-logo{ height:56px; width:auto; display:block; }
.site-nav{ display:flex; gap:14px; flex-wrap:wrap; }
.site-nav a{
  color:#fff; text-decoration:none; font-weight:600; padding:8px 10px; border-radius:10px;
}
.site-nav a:hover{ background:rgba(255,255,255,.15); }

/* --- Layout --- */
.container{ max-width:1100px; margin-inline:auto; padding:24px; }
.intro{
  background:#e9f5ff;
  border:1px solid #cae6ff;
  border-radius:var(--radius);
  padding:18px 20px;
  box-shadow:var(--shadow);
}
.intro h1{ margin:0 0 8px 0; }

/* --- Cards --- */
.cards{
  margin-top:22px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap:18px;
}
.card{
  background:var(--card);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
  height:100%;
}
.card-link{ color:inherit; text-decoration:none; display:flex; flex-direction:column; height:100%; }
.card-img{ width:100%; height:160px; object-fit:cover; display:block; }
.card-body{ padding:14px 16px; display:flex; flex-direction:column; gap:6px; }
.card h2{ font-size:1.15rem; margin:0; }
.card p{ color:var(--muted); margin:0; }
.card:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(2,18,36,.12); }

/* --- Updates --- */
.updates{
  margin-top:28px;
  background:#fff;
  border-radius:var(--radius);
  padding:16px 18px;
  box-shadow:var(--shadow);
  border:1px solid #eef2f7;
}
.btn, .btn-ghost{
  display:inline-flex; gap:8px; align-items:center; text-decoration:none; font-weight:600;
  padding:8px 12px; border-radius:10px;
}
.btn{ background:var(--brand); color:#fff; }
.btn:hover{ background:var(--brand-700); }
.btn-ghost{ color:var(--brand); background:#fff; border:1px solid #cfe8ff; }
.btn-ghost:hover{ background:#f2f8ff; }

/* --- Footer --- */
.site-footer{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 20px; border-top:1px solid #e6eef6; background:#fff;
}
.site-footer .icon{ height:20px; width:auto; }

/* --- Cultura (página interna) --- */
.page-hero{
  background: linear-gradient(180deg, #0099ff, #0077cc);
  color:#fff; padding:28px 20px;
}
.page-hero .wrapper{ max-width:1100px; margin:0 auto; }
.breadcrumbs{ font-size:.9rem; opacity:.9; margin-bottom:6px; }
.grid{
  display:grid; gap:18px; margin-top:20px;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
}
.card small.tag{
  display:inline-block; background:#eef6ff; color:#0353a4; padding:2px 8px; border-radius:20px; font-weight:700; font-size:.75rem;
}

/* --- Video embed responsive --- */
.video{
  position:relative; width:100%; padding-bottom:56.25%; /* 16:9 */
  background:#000; border-radius:12px; overflow:hidden; box-shadow:var(--shadow);
}
.video iframe, .video video{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}

/* --- Preguntas de reflexión --- */
.reflexion{
  background:#fff; padding:14px 16px; border-radius:var(--radius);
  border:1px solid #eef2f7; box-shadow:var(--shadow);
}
.reflexion h3{ margin:0 0 6px 0; font-size:1rem; }
.reflexion ul{ margin:0; padding-left:18px; }
.reflexion li{ margin:4px 0; color:var(--muted); }