
.marca-w{position:relative}
.marca-btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:var(--r);border:1px solid var(--line-2,var(--line));background:var(--surface);color:var(--ink);font:inherit;font-weight:600;font-size:12.5px;cursor:pointer;white-space:nowrap;max-width:240px}
.marca-btn:hover{border-color:var(--evg-600,var(--accent))}
.marca-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.marca-btn svg{width:16px;height:16px;color:var(--accent-text)}
.marca-btn span{overflow:hidden;text-overflow:ellipsis}
.marca-logo{height:18px;width:auto;max-width:72px;object-fit:contain;display:block}
.marca-pop{position:absolute;left:0;top:calc(100% + 8px);z-index:65;width:300px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-pop,0 18px 40px rgba(0,0,0,.18));padding:10px;display:flex;flex-direction:column;gap:4px}
.marca-pop-t{margin:2px 6px 4px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.marca-pop-n{margin:6px 6px 2px;font-size:11.5px;color:var(--muted);line-height:1.4}
.marca-pop button{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:center;text-align:left;border:1px solid transparent;background:none;border-radius:var(--r);padding:8px;cursor:pointer;color:var(--ink);font:inherit}
.marca-pop button:hover{background:var(--surface-2)}
.marca-pop button[aria-checked="true"]{border-color:var(--accent-text);background:var(--accent-soft)}
.marca-pop button b{display:block;font-size:13px}
.marca-pop button small{display:block;font-size:11.5px;color:var(--muted)}
.marca-ico{height:34px;display:grid;place-items:center;background:#fff;border:1px solid var(--line);border-radius:8px;padding:4px}
.marca-ico img{max-height:24px;max-width:54px;object-fit:contain}
.marca-ico svg{width:18px;height:18px;color:var(--accent-text,#333)}
@media (max-width:1320px){.marca-btn>span{display:none}.marca-btn{padding:0 10px}}
@media (max-width:820px){.marca-pop{left:auto;right:0}}

.h-marcas{margin-top:14px}
.h-marcas-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:10px 0 6px}
.h-marca{display:flex;flex-direction:column;gap:8px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;cursor:pointer;color:var(--ink);font:inherit}
.h-marca:hover{border-color:var(--accent-text)}
.h-marca-logo{height:36px;display:flex;align-items:center}
.h-marca-logo img{max-height:32px;max-width:160px;object-fit:contain;background:#fff;border-radius:6px;padding:2px 4px}
.h-marca-v{font-size:24px;font-weight:700;display:flex;flex-direction:column;line-height:1.15}
.h-marca-v small{font-size:12px;font-weight:500;color:var(--muted)}
.h-marca-bar{height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.h-marca-bar i{display:block;height:100%;border-radius:3px}
.h-marca dl{display:grid;grid-template-columns:1fr auto;gap:3px 10px;margin:0;font-size:12.5px}
.h-marca dt{color:var(--muted)}
.h-marca dd{margin:0;font-weight:600;text-align:right}

.cc-marcas{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 8px}
.cc-marcas .cc-eyebrow{width:100%;margin:0}
.cc-marcas .cc-marca-chip{height:30px;display:inline-flex;align-items:center;background:#fff;border-radius:6px;padding:3px 8px;border:1px solid rgba(0,0,0,.08)}
.cc-marcas .cc-marca-chip img{max-height:22px;max-width:96px;object-fit:contain}
@media print{.marca-w{display:none}}

@media (max-width:600px){
  .topbar{gap:8px}
  .top-right{gap:8px;min-width:0}
  .marca-btn{padding:0 9px}
  .marca-btn span{display:none}
  .plat-sw-c{display:none}
  .plat-sw-b{padding:0 9px;gap:6px}
  .user-btn .u-cv{display:none}
  .marca-pop,.per-pop,.notif-pop,.notif-pop.plat-pop{position:fixed;left:12px;right:12px;top:62px;width:auto;max-width:none}
}


@media (max-width:480px){ .topbar .marca-btn>span{display:none} .topbar .marca-btn .per-cv{display:none} }

@media (min-width:601px){ .topbar .search{min-width:240px} }
@media (min-width:601px) and (max-width:1320px){
  .topbar{flex-wrap:wrap;row-gap:8px}
  .topbar .user-btn .who{display:none}
  .topbar .ayuda-btn span{display:none} .topbar .ayuda-btn{width:38px;padding:0;justify-content:center}
  .topbar .marca-btn>span{display:inline-block;max-width:160px;white-space:nowrap}
  .topbar .marca-btn{padding:0 12px}
}
@media (max-width:600px){
  .topbar{flex-wrap:wrap;row-gap:8px}
  .topbar .search{order:10;flex:1 1 100%;max-width:none;min-width:0}
}
