/* Fichas y biblioteca de ingredientes (fase 5): el bloque hacia el test,
   los accesos a "para quién" y a las fuentes, y la firma con foto. */
.nav{gap:4px 20px}
.nav .btn{padding:10px 16px}
@media (max-width:640px){ .nav{gap:4px 12px} }
.logo b{white-space:nowrap}
@media (max-width:420px){ .logo b{font-size:1rem} .nav .btn{padding:9px 13px;font-size:.85rem} }

.accesos{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:18px;font-size:.95rem;font-weight:700}
.accesos a{color:var(--acc,#023BC3);text-decoration:underline;text-underline-offset:4px}
.tiene-sentido{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px;
  background:#0E1220;color:#F4F5F7;border-radius:14px;padding:18px 20px}
.tiene-sentido p{margin:0;max-width:52ch}
.tiene-sentido b{color:#fff}
.tiene-sentido span{color:#B9C7CE}
.tiene-sentido a{display:inline-flex;align-items:center;gap:8px;background:#023BC3;color:#fff;text-decoration:none;font-weight:800;padding:12px 20px;border-radius:999px;white-space:nowrap}
.tiene-sentido a:hover{background:#012E9C}
.para-quien{background:#FFFFFF;border-left:4px solid #D9E2FF;border-radius:10px;padding:16px 18px;color:#0E1220}
.para-quien b{display:block;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:#012E9C;margin-bottom:4px}
.firma-foto{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none}
.al-test{display:inline-block;margin-top:6px;font-size:.88rem;font-weight:700;color:#023BC3;text-decoration:underline;text-underline-offset:3px}

/* Menú en una sola línea en el móvil */
@media (max-width:640px){ .top .nav{flex-wrap:nowrap} .top .shell{gap:8px} }
.top .nav .btn{white-space:nowrap}
[id]{scroll-margin-top:84px}