/* =====================================================================
   ILEAworks.org — hoja base: solo maquetación propia del sitio.
   Colores, tipografía y componentes viven en plano.css (capa de tema).
   ===================================================================== */

/* listas dentro del texto de referencia: sin márgenes por defecto, con aire entre elementos */
.doc ul{margin:0;padding-left:1.25em;display:grid;gap:6px}
.doc ul ul{margin-top:6px}
.doc li .dom-tag{margin-right:6px}

/* página de diagramas: figuras apiladas */
.figures{display:grid;gap:36px}

/* la marca de versión va dentro del logotipo */
.logo .version{font-weight:500}

/* diagramas: del ancho de la columna de texto, no de la página (decisión del dueño 2026-10-08) */
.figure{max-width:560px}
@media (min-width:900px){.figures{grid-template-columns:repeat(2,minmax(0,560px))}}

/* marca «ILEA.works»: ILEA resaltado, «.works» en segundo plano (decisión del dueño 2026-10-08) */
.logo-tld{font-weight:400;color:var(--muted)}

/* URLs largas (p. ej. la de la licencia) se parten en vez de ensanchar la columna en móvil */
.doc a{overflow-wrap:anywhere}

/* ™ como superíndice: la de Public Sans va sobre la línea base (decisión del dueño 2026-10-08) */
sup.tm{font-size:.7em;vertical-align:.59em;line-height:0;letter-spacing:0}

/* banda del metadominio debajo de la rejilla de dominios: mismo aire que entre tarjetas */
.dom-grid + .meta-band{margin-top:16px}

/* En la práctica: fila de etiquetas de los dominios que aplicó cada caso */
.case-tags{display:flex;flex-wrap:wrap;gap:8px}

/* Modo elegido por el visitante con el botón sol / luna (decisión del dueño 2026-10-08).
   Sin elección manda prefers-color-scheme (plano.css). :root[data-theme] pesa más que el
   :root del bloque oscuro de plano.css, así que la elección gana. Valores: spec de Plano §3. */
:root[data-theme="light"]{color-scheme:light;--ground-2:#EEF2F7;--ground:#F7F9FC;--surface:#FDFEFF;--surface-2:#F2F6FB;--shade:#0B1220;--plate:#FDFEFF;--line:#D3DBE6;--line-soft:#E3E8F0;--text:#0E1726;--muted:#3B485A;--faint:#586579;--brand:#015DCF;--brand-dark:#014DAD;--accent:#015DCF;--accent-soft:#E6EFFC;--glow:#028CEE;--ok:#11795A;--warn:#8A5A00;--err:#B42318;--err-line:#B42318;--cat-3:#D64103;--cat-4:#0060D2;--cat-6:#CC1B19;--cat-7:#393797;--tint:7%}
:root[data-theme="dark"]{color-scheme:dark;--ground:#0C121B;--ground-2:#101824;--surface:#131C29;--surface-2:#182333;--shade:#070B11;--plate:#E8EDF4;--line:#253043;--line-soft:#1C2635;--text:#E6EBF2;--muted:#A9B4C3;--faint:#8591A2;--brand:#015DCF;--brand-dark:#2370D8;--accent:#6AAEFF;--accent-soft:#13243D;--glow:#3BB2FF;--ok:#4FD1A0;--warn:#E8B65A;--err:#F29B9B;--err-line:#E57373;--cat-3:#DB4303;--cat-4:#0073FB;--cat-6:#E5302E;--cat-7:#716FCA;--tint:14%}

/* barra superior: menú a la derecha, seguido del botón de modo y del de menú móvil */
.nav{margin-left:auto}
.top-actions{display:flex;align-items:center;gap:8px}
.theme-btn{
  width:40px;height:40px;border-radius:8px;cursor:pointer;display:grid;place-items:center;padding:0;
  background:transparent;border:1px solid var(--line);color:var(--text);transition:border-color .15s;
}
.theme-btn:hover{border-color:var(--accent)}
.theme-btn svg{width:18px;height:18px}
/* luna en modo claro (lleva a oscuro); sol en modo oscuro (lleva a claro) */
.theme-btn .i-sun{display:none}
:root[data-theme="dark"] .theme-btn .i-sun{display:block}
:root[data-theme="dark"] .theme-btn .i-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-btn .i-sun{display:block}
  :root:not([data-theme="light"]) .theme-btn .i-moon{display:none}
}

/* portada: enlace a «En la práctica» debajo de la cita de Kotusev */
.quote-next{margin-top:22px}

/* portada: título en tres renglones (Intelligent & Lean / Enterprise Architecture / ILEA™) */
.hero h1.title-lines{max-width:none}
.title-lines span{display:block}
@media (max-width:440px){.hero h1.title-lines{font-size:clamp(25px,7.6vw,34px)}}
/* portada: sin etiqueta superior, el título necesita menos aire arriba */
.hero:has(.title-lines){padding-top:clamp(32px,4.5vw,56px)}

/* pie: enlaces a quien ofrece la implementación (Bakabia / GCC), bajo la marca */
.foot-links{display:flex;flex-wrap:wrap;gap:6px 20px}
.foot-brand .link-more{font-size:14.5px}

/* pie: columna de la marca más ancha y las de enlaces más a la derecha (con «footer» para ganarle a plano.css, que carga después) */
footer .foot-brand{max-width:72ch}
@media (min-width:801px){footer .foot-cols{grid-template-columns:3fr 1fr 1fr}}