/* ===== Header y menú compartidos por todas las páginas =====
   Clases con prefijo eyg- para no chocar con los estilos propios de cada página. */

/* Red de seguridad contra el scroll horizontal (las causas reales se corrigen en cada página).
   En body se usa clip y no hidden para no romper el header sticky. */
html{overflow-x:hidden;max-width:100%}
body{overflow-x:hidden;overflow-x:clip;max-width:100%}

.eyg-top,.eyg-top *{box-sizing:border-box}
.eyg-top{position:sticky;top:0;z-index:1000;background:#ffd84d;border-bottom:1px solid rgba(0,0,0,.12);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.eyg-top-in{width:min(calc(100% - 32px),1280px);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;min-height:60px}
.eyg-marca{display:flex;align-items:center;gap:10px;min-width:0;color:#000;text-decoration:none}
.eyg-logo{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#2d2faa;border:2px solid rgba(255,255,255,.9);box-shadow:0 6px 16px rgba(0,0,0,.18);color:#fff;font:800 1.55rem/1 Arial,Helvetica,sans-serif}
.eyg-marca-txt{display:grid;gap:2px;min-width:0}
.eyg-nombre{color:#000;font-weight:900;font-size:clamp(1.12rem,4.4vw,1.4rem);line-height:1.08;letter-spacing:-.02em;overflow-wrap:break-word}
.eyg-sub{color:#111;font-size:.76rem;line-height:1.2;font-weight:600}
.eyg-menu-btn{flex:none;width:44px;height:44px;border:0;border-radius:12px;background:rgba(0,0,0,.08);color:#000;font-size:1.4rem;line-height:1;cursor:pointer;touch-action:manipulation}
.eyg-menu-btn:focus-visible,.eyg-cerrar:focus-visible{outline:3px solid #000;outline-offset:2px}

/* El fondo y el panel viven DENTRO del header (mismo contexto de apilamiento):
   así el fondo nunca tapa los links del panel. */
.eyg-fondo{position:fixed;inset:0;z-index:1;background:rgba(0,0,0,.5)}
.eyg-fondo[hidden]{display:none}
.eyg-menu{position:fixed;top:10px;right:10px;z-index:2;width:min(300px,calc(100vw - 20px));max-height:calc(100vh - 20px);overflow-y:auto;display:none;flex-direction:column;gap:2px;padding:54px 10px 10px;background:#0f1a31;border:1px solid rgba(255,255,255,.1);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.eyg-menu.abierto{display:flex}
.eyg-menu a{display:flex;align-items:center;min-height:48px;padding:10px 14px;border-radius:12px;color:#eef4ff;font-weight:700;font-size:.98rem;text-decoration:none;touch-action:manipulation}
.eyg-menu a:hover,.eyg-menu a[aria-current="page"]{background:rgba(255,216,77,.14);color:#ffd84d}
.eyg-menu a:focus-visible{outline:3px solid #ffd84d;outline-offset:2px}
.eyg-cerrar{position:absolute;top:8px;right:8px;width:44px;height:44px;border:0;border-radius:12px;background:rgba(255,255,255,.08);color:#eef4ff;font-size:1.2rem;cursor:pointer}

/* Pantallas angostas: el nombre puede ir en dos líneas y el subtítulo se oculta */
@media (max-width:399px){
  .eyg-sub{display:none}
}

/* Pantallas muy anchas: menú horizontal en el header (con los nombres largos no entra antes; debajo se usa ☰) */
@media (min-width:1600px){
  .eyg-menu-btn,.eyg-cerrar,.eyg-fondo{display:none !important}
  .eyg-menu{display:flex;position:static;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;width:auto;max-height:none;overflow:visible;padding:0;gap:2px;background:none;border:0;box-shadow:none}
  .eyg-menu a{min-height:40px;padding:8px 10px;color:#000;font-size:.88rem}
  .eyg-menu a:hover,.eyg-menu a[aria-current="page"]{background:rgba(0,0,0,.08);color:#000}
  .eyg-menu a:focus-visible{outline-color:#000}
}

/* Botón de DiDi que estaba en el header de /ganar-manejando/ (se mantiene, solo en pantallas grandes como antes) */
.eyg-didi-extra{display:none}
@media (min-width:721px){
  .eyg-didi-extra{display:block;text-align:right;padding:8px 0 0}
  .eyg-didi-extra .wrap{text-align:right}
}