.site-announcement{display:flex;align-items:center;justify-content:center;gap:22px;background:#c1f99b;color:#203e3b;padding:8px 24px;font-size:14px;line-height:1.4}
 .site-announcement .btn{min-height:44px;padding:10px 16px;font-size:14px;white-space:nowrap}
 .site-announcement--quiz{gap:16px;font-weight:500}
 .site-announcement--quiz .announcement-message{display:flex;align-items:center;gap:12px;min-width:0}
 .site-announcement--quiz .announcement-ticket{flex:0 0 22px}
 .site-announcement--quiz .announcement-mobile{display:none}
 .site-announcement--quiz .btn{background:#203e3b;color:#f5f8f4;border:1px solid #203e3b;border-radius:8px;font-weight:600}
 .site-announcement--quiz .btn:hover{background:#31544e;border-color:#31544e}
 .site-announcement .btn:focus-visible{outline:2px solid #203e3b;outline-offset:3px}
 @media(max-width:600px){
  .site-announcement{gap:10px 14px;font-size:13px;line-height:1.4;padding:10px 16px;justify-content:space-between}
  .site-announcement .btn{flex-shrink:0;font-size:13px;padding:10px 12px}
  .site-announcement--quiz{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}
  .site-announcement--quiz .announcement-message{gap:10px}
  .site-announcement--quiz .announcement-desktop{display:none}
  .site-announcement--quiz .announcement-mobile{display:inline}
  .site-announcement--quiz .btn{margin-left:0}
 }
/* On laptops and wider the bar stays slim, so each page's first screen keeps its hero (audit, 29 September 2026). */
@media(min-width:1025px){.site-announcement{padding:6px 24px}.site-announcement .btn{min-height:36px;padding:7px 14px}}
/* Narrow phones (17 October 2026): a longer translated label ("Organizar una evaluación del equipo") pushed the page
   7px wider than a 360px screen. The button now takes at most 62% of the bar and wraps inside it; a label that fits,
   as in English, keeps its one line, and the message wraps first, as before (18 October 2026: letting the button
   shrink with the message folded the English label onto three lines). The quiz bar lays out its own short label. */
@media(max-width:420px){.site-announcement:not(.site-announcement--quiz) .btn{flex-shrink:0;max-width:62%;white-space:normal;text-align:left;line-height:1.3}.site-announcement:not(.site-announcement--quiz) .btn .brand-link__label{white-space:normal}}