:root{
  --bg:#ffffff;
  --card:#f7f8fa;
  --muted:#4b5563;
  --text:#0b1220;
  --accent:#22c55e;
  --accent-2:#16a34a;
  --border:#e5e7eb;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#ffffff;color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-2)}
.container{max-width:1100px;margin:0 auto;padding:24px}
.header{position:sticky;top:0;z-index:50;background:rgba(11,12,15,.7);backdrop-filter:saturate(120%) blur(8px);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative}
.nav a{margin-left:18px;font-weight:600;color:var(--text)}
.menu-toggle{display:none;background:none;border:none;padding:6px;cursor:pointer}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.brand img{height:28px;width:auto}
.hero{padding:14px 16px 10px 16px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,rgba(34,197,94,.08),rgba(0,0,0,0))}
.hero h1{font-size:22px;margin:0 0 8px}
.hero p{margin:0 0 10px;color:var(--muted);font-size:14px}
.btn{display:inline-block;border:1px solid var(--accent);padding:10px 16px;border-radius:10px;font-weight:700}
.kicker{letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-size:12px;margin-bottom:8px}
.section{padding:28px 0}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px}
.card h3{margin:0 0 6px}
.card p{margin:0;color:var(--muted)}
.card .meta{font-size:12px;color:var(--muted)}
.placeholder{border:1px dashed #2b3242;background:rgba(255,255,255,.02);display:flex;align-items:center;justify-content:center;color:var(--muted);border-radius:14px;height:160px}
.upcoming{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px}
.footer{border-top:1px solid var(--border);padding:28px 0;margin-top:28px;color:var(--muted)}
.social{display:flex;gap:14px;align-items:center}
.icon{width:24px;height:24px;display:inline-block}
/* Responsive images for session content */
.session-content img, .content img, .markdown-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Ajuste para imágenes dentro de tarjetas de sesiones en portada */
.card img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 10px;
  object-fit: cover;
  /* Ajusta la altura si quieres un recorte uniforme, por ejemplo: */
  max-height: 180px;
  border: none !important;
}

/* Eliminar borde punteado de la imagen de portada en .card y .placeholder */
.card img, .placeholder img {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.placeholder {
  border-style: solid;
}

@media (max-width: 860px){
  .card-grid{grid-template-columns:1fr}
  .hero{padding:10px 6px 6px 6px;}
  .hero h1{font-size:18px}
  .hero p{font-size:12px}
  .menu-toggle{display:block;z-index:101}
  .nav{
    position:absolute;
    top:56px;
    right:0;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:10px;
    box-shadow:0 4px 24px rgba(0,0,0,0.08);
    display:none;
    flex-direction:column;
    min-width:180px;
    padding:12px 0;
    gap:0;
  }
  .nav a{
    margin:0;
    padding:12px 24px;
    border-bottom:1px solid var(--border);
    color:var(--text);
    font-size:16px;
  }
  .nav a:last-child{border-bottom:none}
  body.menu-open .nav{display:flex;}
}

@media (min-width: 861px) {
  .menu-toggle { display: none !important; }
  .nav {
    position:static;
    display:flex !important;
    flex-direction:row;
    background:none;
    border:none;
    border-radius:0;
    box-shadow:none;
    min-width:0;
    padding:0;
    gap:0;
  }
  .nav a {
    margin-left:18px;
    padding:0;
    border-bottom:none;
    color:var(--text);
    font-size:16px;
  }
}
body{color:#111827}
.header{background:rgba(255,255,255,.8)}
.card p{color:#374151}
.hero{background:linear-gradient(180deg,rgba(34,197,94,.12),rgba(255,255,255,0))}