/* Barco Político — Web UI kit layout helpers (tokens come from colors_and_type.css) */
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font-sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
button{font-family:inherit}
a{color:inherit;text-decoration:none}

.bp-wrap{max-width:1240px;margin:0 auto;padding:0 40px}
.bp-section{padding:96px 0}

/* eyebrow + gold rule */
.bp-eyebrow{display:inline-block}
.bp-rule{width:52px;height:3px;background:var(--grad-gold);border:0;margin:0 0 18px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:14.5px;
  letter-spacing:.02em;padding:15px 30px;border:0;cursor:pointer;transition:all .18s ease;border-radius:0}
.btn svg{width:17px;height:17px}
.btn-gold{background:var(--grad-gold);color:var(--navy-deep)}
.btn-gold:hover{filter:brightness(1.06);box-shadow:0 8px 22px rgba(199,166,103,.32)}
.btn-white{background:#fff;color:var(--navy)}
.btn-white:hover{background:#f0eee8}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-700)}
.btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)}
.btn-outline:hover{border-color:var(--gold);color:var(--gold-light)}
.btn-outline-navy{background:transparent;color:var(--navy);border:1.5px solid var(--navy)}
.btn-outline-navy:hover{background:var(--navy);color:#fff}
.btn-link{background:none;border:0;color:var(--gold-deep);font-weight:600;padding:6px 0;cursor:pointer;
  border-bottom:2px solid transparent;transition:border-color .18s}
.btn-link:hover{border-color:var(--gold)}
.on-navy .btn-link{color:var(--gold)}

/* surfaces */
.bp-navy{background:var(--navy);color:#fff}
.bp-navy-grad{background:var(--grad-navy);color:#fff}
.on-navy{color:#fff}
.on-navy .bp-eyebrow{color:var(--gold)}

/* the slant badge */
.bp-slant{display:inline-flex;align-items:center;gap:8px;background:var(--grad-badge);
  padding:9px 20px;transform:skewX(-11deg);border-left:3px solid var(--gold)}
.bp-slant>*{transform:skewX(11deg)}
.live-dot{width:9px;height:9px;border-radius:50%;background:#e2483d;box-shadow:0 0 0 0 rgba(226,72,61,.7);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(226,72,61,.6)}70%{box-shadow:0 0 0 8px rgba(226,72,61,0)}100%{box-shadow:0 0 0 0 rgba(226,72,61,0)}}

/* entrance helper — content is ALWAYS visible (no opacity gating that could freeze hidden) */
.fade-up{opacity:1;transform:none}

::selection{background:var(--gold);color:var(--navy-deep)}