/* ═══════════════════════════════════════════════════════════════
   EFG Consulting — chrome.css (sep-2026)
   Barra superior, menú, pie de página, botones flotantes e íconos.
   Se carga en TODAS las páginas (incluida /ley-21719) para que el
   encabezado y el pie sean idénticos. Clases con prefijo sx- para no
   chocar con los estilos propios de cada página.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --navy:#1B2A4A;--navy-d:#0e1e36;--teal:#0D7377;--teal-d:#0a5c60;--teal-l:#5eddd0;
  --amber:#D97706;--amber-d:#B45309;--amber-dd:#92400E;--light:#F4F6F9;--slate:#475569;--muted:#5A6B80;--border:#E2E8F0;
  --sx-font:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --sx-serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sx-ease:cubic-bezier(0.23,1,0.32,1);
  --sx-hdr-h:76px;
}

/* ── Los enlaces a secciones (#casos, #sobre…) no quedan bajo el encabezado fijo ── */
[id]{scroll-margin-top:calc(var(--sx-hdr-h) + 16px)}

/* ── Íconos SVG (reemplazan a los emojis) ── */
svg.ic{width:1.15em;height:1.15em;flex:none;display:inline-block;vertical-align:-.18em;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── Barra superior ── */
.sx-bar{background:var(--navy-d);color:#dbe3ee;text-align:center;font:500 .875rem/1.45 var(--sx-font);padding:9px 16px}
.sx-bar a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.sx-bar a:hover{color:var(--teal-l)}
.sx-bar-tag{display:inline-block;background:var(--teal);color:#fff;font-weight:800;font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;padding:2px 8px;border-radius:20px;margin-right:6px;vertical-align:1px}

/* ── Encabezado ── */
.sx-hdr{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--border);
  font-family:var(--sx-font)}
.sx-in{position:relative;max-width:1240px;margin:0 auto;padding:0 24px;height:var(--sx-hdr-h);display:flex;align-items:center;gap:28px}
.sx-logo{display:flex;align-items:center;flex:none;height:100%;padding:6px 0}
.sx-logo img{height:60px;width:auto;display:block}
.sx-nav{flex:1;display:flex;justify-content:center}
.sx-menu{list-style:none;display:flex;align-items:center;gap:4px;margin:0;padding:0}
.sx-menu>li{position:relative;margin:0}
.sx-menu>li.sx-dd-mega{position:static}   /* el panel grande se centra en el encabezado, no en el botón */
.sx-dd-mega>.sx-panel{top:calc(100% - 8px)}
.sx-link,.sx-dd-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:10px;
  font:600 .95rem/1 var(--sx-font);color:var(--navy);background:none;border:0;cursor:pointer;text-decoration:none;
  transition:background .18s ease,color .18s ease;white-space:nowrap}
.sx-link:hover,.sx-dd-btn:hover,.sx-dd.open>.sx-dd-btn{background:var(--light);color:var(--teal)}
.sx-link[aria-current="page"]{color:var(--teal);box-shadow:inset 0 -2px 0 var(--teal);border-radius:10px 10px 0 0}
.sx-link-ra{color:var(--navy)}
.sx-chev{width:16px;height:16px;transition:transform .2s var(--sx-ease)}
.sx-dd.open .sx-chev{transform:rotate(180deg)}

/* Paneles desplegables */
.sx-panel{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,6px);opacity:0;visibility:hidden;
  background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 24px 60px rgba(16,30,54,.18);
  padding:18px;transition:opacity .18s ease,transform .22s var(--sx-ease),visibility 0s linear .22s;z-index:90}
.sx-panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}   /* puente para no perder el hover */
.sx-dd.open>.sx-panel{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .18s ease,transform .22s var(--sx-ease),visibility 0s}
.sx-mega{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 18px;width:min(940px,92vw)}
.sx-list{display:grid;gap:4px;width:320px}
.sx-col{display:flex;flex-direction:column;gap:2px;min-width:0}
.sx-col+.sx-col{border-left:1px solid var(--border);padding-left:18px}
.sx-col-h{display:flex;align-items:center;gap:8px;font:800 .72rem/1 var(--sx-font);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);padding:6px 10px 10px}
.sx-step{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;
  background:var(--navy);color:#fff;font-size:.7rem;letter-spacing:0}
.sx-item{display:flex;gap:12px;align-items:flex-start;padding:10px;border-radius:12px;text-decoration:none;color:var(--navy);
  transition:background .15s ease}
.sx-item:hover{background:var(--light)}
.sx-item>.ic{width:20px;height:20px;margin-top:2px;color:var(--teal)}
.sx-item b{display:block;font:700 .92rem/1.3 var(--sx-font);color:var(--navy)}
.sx-item small{display:block;font:500 .8rem/1.4 var(--sx-font);color:var(--muted);margin-top:2px}
.sx-item:hover b{color:var(--teal)}
/* Etiquetas dentro del menú */
.sx-tag{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:20px;background:#e6f7f6;color:#0a5c60;
  font:800 .62rem/1.4 var(--sx-font);letter-spacing:.07em;text-transform:uppercase;vertical-align:2px;white-space:nowrap}
.sx-tag-prem{background:#fef3e2;color:#92400E}
.sx-acc-body a .sx-tag{margin-left:8px}
.sx-item b .sx-tag{display:table;margin:5px 0 1px}   /* siempre bajo el título: se ve ordenado en las 3 columnas */
/* Franja de emprendedores dentro del panel de Servicios */
.sx-franja{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:14px -18px -18px;padding:14px 28px;
  background:var(--light);border-top:1px solid var(--border);border-radius:0 0 16px 16px}
.sx-franja-t{font:800 .74rem/1.4 var(--sx-font);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sx-franja a{display:inline-flex;align-items:center;gap:6px;font:700 .88rem/1 var(--sx-font);color:var(--navy);text-decoration:none;
  padding:8px 12px;border-radius:9px;background:#fff;border:1px solid var(--border)}
.sx-franja a:hover{color:var(--teal);border-color:var(--teal)}
.sx-franja-mas{margin-left:auto;background:transparent!important;border-color:transparent!important;text-decoration:underline!important;text-underline-offset:3px}
.sx-franja .sx-tag{margin-left:4px}
.sx-franja svg.ic{width:15px;height:15px}
.sx-col-note{font:500 .8rem/1.45 var(--sx-font);color:var(--muted);margin:auto 10px 4px;padding-top:12px;border-top:1px dashed var(--border)}

/* Acciones */
.sx-actions{display:flex;align-items:center;gap:10px;flex:none}
.sx-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:12px;
  background:var(--amber-d);color:#fff;font:700 .92rem/1 var(--sx-font);text-decoration:none;white-space:nowrap;
  box-shadow:0 6px 16px rgba(180,83,9,.25);transition:background .18s ease,transform .18s var(--sx-ease)}
.sx-cta:hover{background:var(--amber-dd);color:#fff;transform:translateY(-1px)}
.sx-cta .ic{width:18px;height:18px}
.sx-burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;border:1px solid var(--border);
  background:#fff;color:var(--navy);cursor:pointer}
.sx-burger .ic{width:22px;height:22px}
.sx-burger .sx-ico-close{display:none}
.sx-burger[aria-expanded="true"] .sx-ico-open{display:none}
.sx-burger[aria-expanded="true"] .sx-ico-close{display:inline-block}

/* Menú móvil */
.sx-drawer{border-top:1px solid var(--border);background:#fff;padding:8px 20px 22px;max-height:calc(100dvh - var(--sx-hdr-h));overflow-y:auto;
  box-shadow:0 18px 40px rgba(16,30,54,.12)}
.sx-drawer[hidden]{display:none}
.sx-acc{border-bottom:1px solid var(--border)}
.sx-acc summary{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:52px;
  font:700 1.02rem/1 var(--sx-font);color:var(--navy);cursor:pointer}
.sx-acc summary::-webkit-details-marker{display:none}
.sx-acc[open] .sx-chev{transform:rotate(180deg)}
.sx-acc-body{display:flex;flex-direction:column;padding:0 0 12px}
.sx-acc-body a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px;font:600 .95rem/1.3 var(--sx-font);color:var(--slate);text-decoration:none}
.sx-acc-body a:hover{background:var(--light);color:var(--teal)}
.sx-acc-body .sx-col-h{padding:12px 12px 6px}
.sx-dlink{display:flex;align-items:center;min-height:52px;border-bottom:1px solid var(--border);font:700 1.02rem/1 var(--sx-font);color:var(--navy);text-decoration:none}
.sx-cta-block{display:flex;width:100%;margin-top:18px;min-height:50px}

@media (hover:hover) and (pointer:fine) and (min-width:1101px){
  .sx-dd:not(.sx-sup):hover>.sx-panel{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .18s ease,transform .22s var(--sx-ease),visibility 0s}
  .sx-dd:not(.sx-sup):hover>.sx-dd-btn{background:var(--light);color:var(--teal)}
  .sx-dd:not(.sx-sup):hover .sx-chev{transform:rotate(180deg)}
}
@media (max-width:1240px){.sx-in{gap:16px}.sx-link,.sx-dd-btn{padding:0 10px;font-size:.9rem}}
@media (max-width:1100px){
  :root{--sx-hdr-h:66px}
  .sx-nav{display:none}
  .sx-burger{display:inline-flex}
  .sx-in{justify-content:space-between;padding:0 16px}
  .sx-logo img{height:50px}
}
@media (min-width:1101px){.sx-drawer{display:none!important}}
@media (max-width:420px){.sx-actions .sx-cta span{display:none}.sx-actions .sx-cta{width:44px;padding:0}}

/* ── Pie de página ── */
.sx-foot{background:var(--navy-d);color:#b6c3d6;font:400 .9rem/1.6 var(--sx-font);padding:56px 24px 0;text-align:left}
.sx-foot-in{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:36px}
.sx-foot-logo{display:inline-flex;background:#F6F8FA;border-radius:14px;padding:10px 14px;margin-bottom:16px}   /* logo como tarjeta clara, nunca directo sobre el navy */
.sx-foot-logo img{height:64px;width:auto;display:block}
.sx-foot-brand p{max-width:42ch;margin:0 0 14px;color:#b6c3d6;font-size:.9rem}
.sx-soc{display:flex;flex-wrap:wrap;gap:6px 16px}
.sx-soc a{color:#dbe3ee;font-weight:600;text-decoration:none}
.sx-soc a:hover{color:var(--teal-l)}
.sx-foot-col{display:flex;flex-direction:column;gap:2px}
.sx-foot-h{font:800 .74rem/1 var(--sx-font);letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:12px}
.sx-foot-col a{display:inline-flex;align-items:center;gap:8px;min-height:32px;color:#b6c3d6;text-decoration:none;font-size:.9rem}
.sx-foot-col a:hover{color:#fff}
.sx-foot-col a .ic{width:16px;height:16px;color:var(--teal-l)}
.sx-foot-note{font-size:.84rem;color:#93a4bd;margin-top:6px}
.sx-foot-legal{max-width:1240px;margin:40px auto 0;padding:18px 0 96px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:space-between;font-size:.82rem;color:#93a4bd}
.sx-foot-legal b{color:#dbe3ee;font-weight:700}
.sx-foot-legal a{color:#dbe3ee;text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){.sx-foot-in{grid-template-columns:1fr 1fr}.sx-foot-brand{grid-column:1/-1}}
@media (max-width:560px){.sx-foot{padding:44px 20px 0}.sx-foot-in{grid-template-columns:1fr;gap:28px}.sx-foot-legal{flex-direction:column;padding-bottom:88px}}

/* ── Botones flotantes ── */
.sx-fab{position:fixed;right:20px;z-index:70;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border-radius:30px;
  font:700 .9rem/1 var(--sx-font);color:#fff;text-decoration:none;box-shadow:0 14px 34px rgba(16,30,54,.24);
  transition:opacity .25s ease,transform .25s var(--sx-ease),background .2s ease}
.sx-fab .ic{width:18px;height:18px}
.sx-fab-wa{bottom:20px;background:#15803d}
body.pg-diagnostico:not(.qz-result-visible) .sx-fab-wa,
body.pg-ley:not(.qz-result-visible) .sx-fab-wa{display:none!important}   /* verde WhatsApp oscurecido: texto blanco con contraste AA (5:1) */
.sx-fab-wa:hover{background:#166534;color:#fff}
.sx-fab-cal{bottom:80px;background:var(--teal);opacity:0;transform:translateY(12px);pointer-events:none}
.sx-fab-cal.sx-show{opacity:1;transform:none;pointer-events:auto}
.sx-fab-cal:hover{background:var(--teal-d);color:#fff}
@media (max-width:900px){
  .sx-fab-cal{display:none}                 /* en móvil el botón de agenda vive en el encabezado */
  .sx-fab-wa{right:16px;bottom:16px;width:52px;padding:0;justify-content:center}
  .sx-fab-wa span{display:none}
  .sx-fab-wa .ic{width:24px;height:24px}
}
/* Mientras se responde un quiz, los flotantes no tapan las opciones */
body.pg-diagnostico:not(.qz-result-visible) .sx-fab-wa{display:none!important}
@media (max-width:900px){body.qz-active .sx-fab,body.pg-ley .sx-fab{display:none!important}}
@media (max-width:900px){body.pg-checklist .sx-fab-wa{display:none!important}}   /* la barra fija del checklist ya ocupa esa zona */

@media (prefers-reduced-motion:reduce){
  .sx-panel,.sx-chev,.sx-fab,.sx-cta,.sx-link,.sx-dd-btn{transition:none!important}
}
@media print{.sx-bar,.sx-hdr,.sx-fab{display:none!important}}