/* Brandbook de Promtdea (27-sep-2026): página pública /marca. Reusa la piel de la plataforma (estilo.css) y añade la maqueta editorial. */
.bk{max-width:1120px;margin:0 auto}
.bk-portada{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:22px;padding:56px 0 40px}
.bk-portada .bk-logo{width:min(640px,92vw)}
.bk-portada h1{font-family:var(--display);font-size:clamp(2.2rem,5vw,3.6rem);letter-spacing:-.03em;line-height:1.02;margin:0}
.bk-portada .lead{max-width:640px;margin:0 auto}
.bk-meta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.bk-meta span{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:8px 12px;border:1px solid var(--line);border-radius:999px}
.bk-sec{padding:64px 0;border-top:1px solid var(--line)}
.bk-sec .kicker{display:inline-block;margin-bottom:10px}
.bk-sec h2{font-family:var(--display);font-size:clamp(1.7rem,3.4vw,2.5rem);letter-spacing:-.025em;line-height:1.05;margin:0 0 10px}
.bk-sec>.lead{max-width:760px;margin:0 0 28px}
.bk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.bk-card{border:1px solid var(--line);border-radius:22px;padding:22px;background:var(--surface);display:flex;flex-direction:column;gap:14px}
.bk-card.blanca{background:var(--bg)}
.bk-card.oscura{background:#141118;color:#fff;border-color:#141118}
.bk-card.violeta{background:var(--accent);color:#fff;border-color:var(--accent)}
.bk-card h3{margin:0;font-size:1.05rem;letter-spacing:-.01em}
.bk-card .etq{font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.bk-card.oscura .etq,.bk-card.violeta .etq{color:rgba(255,255,255,.72)}
.bk-card p{margin:0;font-size:.95rem;line-height:1.5;color:var(--muted)}
.bk-card.oscura p,.bk-card.violeta p{color:rgba(255,255,255,.82)}
.bk-centro{display:flex;align-items:center;justify-content:center;min-height:220px}
.bk-fig{display:flex;align-items:center;justify-content:center}
.bk-fig svg{display:block;max-width:100%;height:auto}
.bk-movimiento{border:1px solid var(--line);border-radius:26px;padding:34px 24px;background:var(--surface);display:flex;flex-direction:column;align-items:center;gap:18px}
.bk-movimiento .wm-loop{width:min(820px,92vw)}
.bk-fases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:100%}
.bk-fases .bk-card{align-items:center;text-align:center}
.bk-fases svg{width:100%;max-width:300px}
.bk-swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}
.sw{border-radius:20px;padding:18px;min-height:150px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;border:1px solid var(--line)}
.sw b{font-family:var(--mono);font-size:.9rem;letter-spacing:.02em}
.sw span{font-size:.8rem;opacity:.85}
.sw.violeta{background:#6D28D9;color:#fff}.sw.lima{background:#C6FF3D;color:#111}.sw.tinta{background:#111111;color:#fff}.sw.blanco{background:#fff;color:#111}.sw.noche{background:#141118;color:#fff}.sw.superficie{background:#F7F5FC;color:#111}
.bk-tipo{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.bk-tipo .muestra{font-size:2.6rem;line-height:1.05;letter-spacing:-.02em;margin:6px 0 2px}
.bk-tipo .jost{font-family:Jost,sans-serif;font-weight:600}
.bk-tipo .grotesk{font-family:var(--display);font-weight:700}
.bk-tipo .inter{font-family:Inter,system-ui,sans-serif;font-weight:500;font-size:1.4rem}
.bk-usos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.uso{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--bg)}
.uso .lienzo{height:150px;display:flex;align-items:center;justify-content:center;position:relative}
.uso .lienzo.oscuro{background:#141118}.uso .lienzo.violeta{background:#6D28D9}.uso .lienzo.foto{background:linear-gradient(135deg,#E9D5FF,#C6FF3D)}
.uso .lienzo svg{width:120px;height:auto}
.uso .lienzo.mal::after{content:"";position:absolute;inset:0;background:linear-gradient(45deg,transparent 47%,rgba(220,38,38,.85) 47%,rgba(220,38,38,.85) 53%,transparent 53%),linear-gradient(-45deg,transparent 47%,rgba(220,38,38,.85) 47%,rgba(220,38,38,.85) 53%,transparent 53%);pointer-events:none}
.uso .pie{padding:12px 14px;font-size:.85rem;line-height:1.4;display:flex;gap:8px;align-items:flex-start}
.uso .pie i{flex:none;font-style:normal;font-weight:700;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.8rem}
.uso .pie i.si{background:var(--ok-soft,#E6F9EE);color:var(--ok,#15803D)}.uso .pie i.no{background:#FEE2E2;color:#B91C1C}
.bk-descargas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.desc{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:18px;padding:14px 16px;text-decoration:none;color:inherit;background:var(--bg)}
.desc:hover{border-color:var(--accent)}
.desc .vista{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex:none;background:var(--surface);overflow:hidden}
.desc .vista.oscura{background:#141118}.desc .vista.violeta{background:var(--accent)}
.desc .vista img,.desc .vista svg{width:40px;height:40px;display:block}
.desc b{display:block;font-size:.95rem}.desc small{color:var(--muted)}
.bk-cotas{font-family:var(--mono);font-size:.78rem;color:var(--muted)}
.bk-tabla{width:100%;border-collapse:collapse;font-size:.92rem}
.bk-tabla th,.bk-tabla td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.bk-tabla th{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* el movimiento, en bucle (8 s): parte del monograma, se desagrega, descansa y vuelve */
.wm-loop .w-p{animation:bk-p 8s cubic-bezier(.65,0,.2,1) infinite}
.wm-loop .w-d{animation:bk-d 8s cubic-bezier(.65,0,.2,1) infinite}
.wm-loop .w-i{animation:bk-i 8s cubic-bezier(.65,0,.2,1) infinite}
.wm-loop .w-t{animation:bk-t 8s ease infinite}
@keyframes bk-p{0%,22%{transform:translate(112px,0)}40%,78%{transform:translate(0,0)}92%,100%{transform:translate(112px,0)}}
@keyframes bk-d{0%,22%{transform:translate(-44px,0)}40%,78%{transform:translate(0,0)}92%,100%{transform:translate(-44px,0)}}
@keyframes bk-i{0%,22%{transform:translate(-16.5px,-9.4px)}40%,78%{transform:translate(0,0)}92%,100%{transform:translate(-16.5px,-9.4px)}}
@keyframes bk-t{0%,34%{opacity:0;transform:translateY(6px)}48%,74%{opacity:1;transform:translateY(0)}84%,100%{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.wm-loop *{animation:none!important}}
@media (max-width:760px){.bk-fases{grid-template-columns:1fr}.bk-tipo{grid-template-columns:1fr}.bk-sec{padding:44px 0}}