/* ===== Componentes globales: barra, WhatsApp flotante, chispas, pie ===== */

/* Barra superior */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:rgba(14,16,18,.8)}
.barra{position:sticky;top:env(safe-area-inset-top,0px);z-index:8;background:rgba(14,16,18,.72);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);border-bottom:1px solid rgba(255,255,255,.08)}
.barra .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--alto-barra);gap:16px}
.marca{font-stretch:125%;font-weight:850;font-size:17px;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra nav{display:flex;gap:22px;font-size:13px;color:#c9ced3}
.barra nav a{text-decoration:none;padding:8px 0;transition:color 160ms ease}
@media (hover:hover) and (pointer:fine){.barra nav a:hover{color:#fff}}

/* Botón del menú (solo se ve en celular, ver responsive.css) */
.menu-btn{display:none;width:44px;height:44px;border:0;border-radius:50%;background:transparent;cursor:pointer;position:relative;flex:none;user-select:none;-webkit-user-select:none}
.menu-btn span{position:absolute;left:13px;right:13px;height:2px;border-radius:2px;background:#f2f3f4;transition:transform 200ms var(--ease-out)}
.menu-btn span:first-child{top:18px}
.menu-btn span:last-child{top:25px}
.abierto .menu-btn span:first-child{transform:translateY(3.5px) rotate(45deg)}
.abierto .menu-btn span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* Botón de WhatsApp flotante */
.flotante{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));width:58px;height:58px;border-radius:50%;background:var(--wa-ico);display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.5);z-index:9;transition:transform 140ms var(--ease-out)}
.flotante:active{transform:scale(.94)}
/* Se esconde mientras el acordeón está a pantalla completa (cada panel ya tiene su botón) */
.flotante{transition:transform 140ms var(--ease-out),opacity 200ms ease}
.sin-flotante .flotante{opacity:0;pointer-events:none;transform:scale(.9)}

/* Lienzo de chispas */
.chispero{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:20}

/* Pie */
footer{border-top:1px solid var(--linea);padding:22px 0;color:var(--gris2);font-size:13px}
footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* Aparición suave al llegar (solo con JS y sin "reducir movimiento").
   La clase .js se pone desde el <head> para que no haya parpadeo. */
.js .sube{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:calc(var(--d,0) * 70ms)}
.js .sube.visto{opacity:1;transform:none}