.guia h2{font-family:var(--display);font-size:var(--t-2);margin:36px 0 14px}
.guia code{background:var(--marca-suave);padding:1px 6px;border-radius:6px}
.nota{color:var(--tinta-2);max-width:760px}
.logos{display:flex;gap:16px;flex-wrap:wrap}
.lg{margin:0;padding:24px;border-radius:var(--radio);display:flex;flex-direction:column;align-items:center;gap:10px;min-width:220px}
.lg.claro{background:var(--superficie);box-shadow:var(--sombra)}
.lg.oscuro{background:var(--tinta);color:var(--superficie)}
.lg figcaption{font-size:var(--t-chico)}
.paleta{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:12px}
.sw{background:var(--superficie);border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra)}
.sw .muestra{height:84px;display:flex;align-items:flex-end;padding:10px 12px;font-weight:700;font-size:var(--t-chico)}
.sw .info{padding:12px}
.sw b{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--t-chico)}
.sw small{display:block;color:var(--tinta-2);font-size:var(--t-chico);margin-top:4px}
.sw .ratio{display:inline-block;margin-top:8px;font-size:var(--t-chico);font-weight:700;padding:2px 8px;border-radius:999px}
.sw .ratio.si{background:color-mix(in srgb,var(--ok) 14%,#fff);color:var(--ok)}
.sw .ratio.no{background:color-mix(in srgb,var(--error) 14%,#fff);color:var(--error)}
.tipos .t{background:var(--superficie);border-radius:var(--radio);padding:16px 18px;margin-bottom:10px;box-shadow:var(--sombra)}
.tipos small{display:block;color:var(--tinta-2);font-size:var(--t-chico);font-family:var(--sans);font-weight:400}
.comp{display:flex;flex-direction:column;gap:14px;max-width:760px}
.fila{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn.sec{background:transparent;color:var(--marca);box-shadow:inset 0 0 0 1.5px var(--marca)}
.btn:hover{background:var(--marca-hover)}
.btn.sec:hover{background:var(--marca-suave)}
.chip{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;background:var(--marca-suave);color:var(--marca);font-weight:700;font-size:var(--t-chico)}
.chip.acento{background:var(--acento);color:var(--sobre-acento)}
.comp label{display:block;margin:12px 0 6px;font-weight:600;font-size:var(--t-chico);color:var(--tinta-2)}
.comp input{width:100%;min-height:44px;padding:10px 14px;border-radius:var(--radio-chico);border:1px solid var(--linea);background:var(--superficie)}
.avisos .av{margin:0;padding:10px 14px;border-radius:var(--radio-chico);font-weight:600}
.av.ok{background:color-mix(in srgb,var(--ok) 12%,#fff);color:var(--ok)}
.av.aviso{background:color-mix(in srgb,var(--aviso) 12%,#fff);color:var(--aviso)}
.av.error{background:color-mix(in srgb,var(--error) 12%,#fff);color:var(--error)}
.av.info{background:color-mix(in srgb,var(--info) 12%,#fff);color:var(--info)}
.reglas{max-width:760px;display:flex;flex-direction:column;gap:8px;padding-left:20px;margin-bottom:56px}