/*
  Semilleros — Comunidad Educativa Mi Guía
  Design system compartido por todo el subdominio.
  Paleta e identidad tomadas de comunidadeducativamiguia.org:
  azul institucional #0A2342, amarillo dorado #FFD700, tipografía Inter.
  Cada página del sitio (portada y cada taller) importa este archivo
  antes de su propio CSS específico.
*/

:root{
  --bg:#F8F9FA; --surface:#FFFFFF; --surface-2:#F1F2F4; --border:#E5E7EB;
  --ink:#0A2342; --ink-soft:#6B7280;
  --accent:#0A2342; --accent-ink:#FFFFFF;
  --gold:#FFD700; --gold-ink:#0A2342;
  --radius:14px;
  --radius-lg:20px;
  --font-body:'Inter','Segoe UI',sans-serif;
  --container-w:1080px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#081A30; --surface:#0F2745; --surface-2:#153158;
    --border:rgba(255,255,255,.14); --ink:#F3F5F8; --ink-soft:#A9B4C4;
    --accent:#FFD700; --accent-ink:#0A2342;
  }
}
:root[data-theme="dark"]{
  --bg:#081A30; --surface:#0F2745; --surface-2:#153158;
  --border:rgba(255,255,255,.14); --ink:#F3F5F8; --ink-soft:#A9B4C4;
  --accent:#FFD700; --accent-ink:#0A2342;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);line-height:1.55;}
img{max-width:100%;display:block;}
a{color:var(--accent);}
h1,h2,h3,h4{font-family:var(--font-body);font-weight:800;text-wrap:balance;margin:0;letter-spacing:-.01em;}
.container{max-width:var(--container-w);margin:0 auto;padding:0 1.25rem;}
.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);display:block;}
@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto !important;}}

/* ── Encabezado del sitio (compartido en todas las páginas) ── */
.site-header{position:sticky;top:0;z-index:20;background:rgba(10,35,66,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.85rem;padding-bottom:.85rem;}
.brand-lockup{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:#fff;}
.brand-mark{width:2.1rem;height:2.1rem;border-radius:9999px;background:var(--gold);color:var(--gold-ink);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;flex:none;}
.brand-name{font-weight:800;font-size:1.05rem;line-height:1.1;}
.brand-name small{display:block;font-weight:500;font-size:.72rem;color:rgba(255,255,255,.72);}
.site-nav{display:flex;align-items:center;gap:1.4rem;font-size:.9rem;font-weight:600;}
.site-nav a{color:rgba(255,255,255,.85);text-decoration:none;transition:color .2s ease;}
.site-nav a:hover{color:var(--gold);}
.site-nav a.current{color:var(--gold);}

/* ── Pie de página del sitio ── */
.site-footer{border-top:1px solid var(--border);margin-top:4rem;padding:2.25rem 0;color:var(--ink-soft);font-size:.86rem;}
.site-footer .container{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;}
.site-footer a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px;}
.site-footer a:hover{color:var(--ink);}

/* ── Botones (mismo lenguaje que comunidadeducativamiguia.org) ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.6rem;border-radius:9999px;font-weight:700;font-size:.92rem;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,background .2s ease;}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(10,35,66,.18);}
.btn:active{transform:translateY(-1px);}
.btn-primary{background:var(--gold);color:var(--gold-ink);}
.btn-primary:hover{background:#F0C808;}
.btn-secondary{border-color:var(--gold);color:var(--ink);background:transparent;}
.btn-secondary:hover{background:var(--gold);color:var(--gold-ink);}

/* ── Tarjeta genérica reutilizable (catálogo, tarjetas de contenido) ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 4px 6px rgba(10,35,66,.06);}

/* ── Insignias / etiquetas ── */
.badge{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:.25rem .65rem;border-radius:9999px;background:var(--gold);color:var(--gold-ink);}
.badge-outline{background:transparent;border:1px solid var(--border);color:var(--ink-soft);}