:root{
  --brand: #1E2B5E;
  --brand-dark: #6E4BC5;
  --ink:#171717;
  --muted:#6b7280;
  --peach:#FFD8CC;
  --yellow:#FFE34A;
  --purple:#F2E8FE;
  --mint-soft:#DFF4EF;
  --mint:#14c4b9;
  --gold:#FFE34A;
}
body{font-family:"Nunito",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--ink)}
/* Skip link visible cuando recibe foco (Bootstrap la mantiene oculta por defecto) */
.visually-hidden-focusable{position:absolute; top:.5rem; left:.5rem; z-index:1080; padding:.5rem .75rem; background:var(--brand); color:#fff; border-radius:.5rem; text-decoration:none}
.bi{display:inline-block; width:1em; height:1em; vertical-align:-0.125em; fill:currentColor}
.topbar{background:#f4f7fb;font-size:.9rem}
.topbar a{color:#334155;text-decoration:none}
.topbar .bi{font-size:1rem}
.navbar-brand strong{color:var(--brand)}
.btn-pill{border-radius:999px}
.brand-name-primary{color:var(--brand)}
.brand-name-secondary{color:var(--brand-dark)}
.btn-brand-secondary{background-color:var(--brand-dark); border-color:var(--brand-dark); color:#fff}
.btn-brand-secondary:hover{background-color:var(--brand-dark); border-color:var(--brand-dark); opacity:.9; color:#fff}
.hero{
  background: linear-gradient(90deg, rgba(15,17,30,.88) 0%, rgba(15,17,30,.72) 40%, rgba(15,17,30,.35) 100%), url('/img/home.webp');
  background-size:cover;background-position:center;
  color:#fff;min-height:260px;display:flex;align-items:end
}
/* Hero plano de color de marca para páginas interiores sin foto (ver .hero-404 en 404.astro, mismo tratamiento) */
.hero-brand{
  background:
    radial-gradient(circle at 10% 20%, rgba(255, 227, 74, 0.18), transparent 35%),
    radial-gradient(circle at 80% 0%, rgba(110, 75, 197, 0.28), transparent 40%),
    linear-gradient(120deg, #1e2b5e, #6e4bc5);
}
.breadcrumb a{color:#fff;text-decoration:none}
.hero h1{font-weight:800}
.event-card{border-radius:14px; border:none; box-shadow:none; cursor:pointer; transition:transform 0.2s ease; color:#1e3a5f; display:flex; flex-direction:column}
.event-card:hover{transform:translateY(-4px);}
.event-card .card-description{display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden}
.event-card .meta .bi{margin-right:.4rem}
.event-card h4, .event-card p, .event-card .meta{color:#1e3a5f}
.event-card a{color:inherit}
.event-card:hover h4 a{text-decoration:underline}
.event-card .card-cta{color:var(--brand-dark); display:inline-flex; align-items:center; gap:.35rem}
.event-card .card-cta .bi{transition:transform .2s ease}
.event-card:hover .card-cta .bi{transform:translateX(3px)}
.category-card .bi{font-size:1.75rem}
.card-purple{background:var(--purple)}
.card-mint{background:var(--mint)}
.card-mint-soft{background:var(--mint-soft)}
.card-gold{background:#e7d3a1}
.card-peach{background:var(--peach)}
footer{background:var(--peach)}
footer a{color:inherit; text-decoration:none}
/* Bootstrap's .text-secondary (#6c757d) is !important and only 3.56:1 on the footer's peach background; this class replaces it there to meet WCAG AA (4.5:1) */
.footer-muted{color:#5a5f66}
.copyright{border-top:1px solid #e5e7eb; font-size:.9rem}
.rounded-xl{border-radius:18px}
.plan-detail-card{border-radius:18px; border:2px solid #1f2937; box-shadow:none; background:#fff}
/* El <img> declara sus dimensiones reales para reservar el hueco: max-width lo ajusta a la
   columna sin deformarlo y evita ampliar imágenes de origen más pequeñas que la columna */
.plan-detail-image{border-radius:14px; max-width:100%; height:auto}
.detail-list{list-style:none; padding-left:0; margin-bottom:0}
.detail-list li{padding:1rem 0; border-bottom:1px solid #e5e7eb; display:flex; gap:1rem}
.detail-list li:last-child{border-bottom:0}
.detail-icon{width:48px; height:48px; border-radius:12px; background:#f2f4f7; display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:#0f172a}
.detail-meta span{display:block}
.detail-meta small{color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-weight:600}
.highlight-card{border-radius:14px; border:2px dashed #cbd5f5; padding:1.25rem; background:#f8fbff}
.highlight-card strong{display:block; font-size:1.1rem}
.info-aside{border-radius:18px; border:2px solid #1f2937; background:var(--brand); color:#fff; padding:1.5rem; box-shadow:none}
.info-aside h5{color:#fff}
.info-aside .bi{font-size:1.3rem}